性能优化篇---Webpack构建代码质量压缩

三、压缩文件jscss

•  行使npm i -D webpack-parallel-uglify-plugin启用多线程并行压缩JS 

optimization: {  
    minimizer: [  
        new ParallelUglifyPlugin({  
            cacheDir: '.cache/', //缓存压缩，默认不缓存，配置存放位置开启  
            test: /.js$/, //匹配必要压缩的文件，默以为/.js$/和Loader设置一样  
            //include: [], 行使正则去选择必要被压缩的文件和Loader设置一样  
            //exclude: [], 行使正则去去除不必要被压缩的文件和Loader设置一样  
            //workerCount: 2, 开启几个子历程并发执行压缩  
            // sourceMap: false, 是否输出source Map，开启会导致压缩变慢  
            // uglifyJS: {}, 用于压缩ES6代码不行和uglifyJS同时行使  
            uglifyJS:{//压缩ES5代码  
                output: {  
                    // 是否输出可读性较强的代码，即会保存空格和制表符，默以为输出，为了到达更好的压缩结果，可以配置为false  
                    beautify: false,  
                    //是否保存代码中的注释，默以为保存，为了到达更好的压缩结果，可以配置为false  
                    comments: false  
                },  
                compress: {  
                    //是否在UglifyJS删除没有效到的代码时输出告诫信息，默以为输出  
                    warnings: false,  
                    //是否删除代码中全部的console语句，默以为不删除，开启后，会删除全部的console语句  
                    drop_console: true,  
                    //是否内嵌固然已经界说了，可是只用到一次的变量，好比将 var x = 1; y = x, 转换成 y = 1, 默以为否  
                    collapse_vars: true,  
                    // 提取呈现多次可是没有界说成变量去引用的静态值  
                    reduce_vars:true  
                }  
            },  
        }),  
    ]  
}, 

•  提取和压缩Css

        1.行使插件：optimize-css-assets-webpack-plugin、mini-css-extract-plugin

        2.行使示例：

// 提取css到单独的文件  
const MiniCssExtractPlugin = require("mini-css-extract-plugin");  
// optimizeCssPlugin CSS文件压缩插件  
const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');  
const extractSCSS = new MiniCssExtractPlugin({  
    filename: 'css/[name].[contenthash:8].css',  
    chunkFilename: 'css/[name]_[contenthash:8].css',  
    fallback:'style-loader'  
});  
...  
...  
plugins: [  
    new optimizeCssPlugin({  
        assetNameRegExp: /.css$/g,  
        cssProcessor: require('cssnano'),  
        cssProcessorOptions: { discardComments: { removeAll: true } },  
        canPrint: true  
    }),  
] 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!