性能优化篇---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  
    }),  
] 

（编辑：三明站长网）

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