机能优化篇---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

（编辑：湖南网）

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