性能优化篇---Webpack构建速度优化

代码压缩用ParallelUglifyPlugin代替自带的 UglifyJsPlugin插件

•  自带的JS压缩插件是单线程执行的，而webpack-parallel-uglify-plugin可以并行的执行
•  配置参数：

        1. uglifyJS: {}：用于压缩 ES5 代码时的配置，Object 类型

        2. test: /.js$/g:使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/

        3. include: []:使用正则去包含被压缩的文件，默认为 [].

        4. exclude: []: 使用正则去包含不被压缩的文件，默认为 []

        5. cacheDir: ''：缓存压缩后的结果，下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回，默认不会缓存，开启缓存设置一个目录路径

        6. workerCount: ''：开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1

        7. sourceMap: false：是否为压缩后的代码生成对应的Source Map, 默认不生成

...  
minimizer: [  
    // webpack:production模式默认有配有js压缩，但是如果这里设置了css压缩，js压缩也要重新设置,因为使用minimizer会自动取消webpack的默认配置  
    new optimizeCssPlugin({  
        assetNameRegExp: /.css$/g,  
        cssProcessor: require('cssnano'),  
        cssProcessorOptions: { discardComments: { removeAll: true } },  
        canPrint: true  
    }),  
    new ParallelUglifyPlugin({  
        cacheDir: '.cache/',  
        uglifyJS:{  
            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,  
            }  
        }  
}),  
] 

•  构建结果对比：["11593ms","10654ms","8334ms","7734ms"]
•  整体构建速度从12000ms降到现在的8000ms

（编辑：晋中站长网）

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