webpack one package to optimize performance

Recent projects demand is not very nervous, thinking about this little exercise, relax, however, the company team is very timely convening the front opened a little while, to talk about the issue is what currently exists in the project, and deal with the problems there is no plan to improve and optimize the ...

In which he addressed the issue of webpack packaged slow, currently used in the project webpack is 4.8.1 version, compared to the previous version can be said that performance has improved a lot, but there are still some places is not very satisfactory, For example, the first package did not even took 72394ms, nearly a minute, continuously repeated several times, consuming only more, no less (every time you need to be deleted to ensure the accuracy node_modules), in the case to see if there there is no way to improve the speed of packaging, not to mention really found some place that can be optimized

Are packaging used in the project is webpack the default compression tool UglifyJS plug-in, which uses compressed code is single-threaded, which means that when multiple js files need to be compressed, it needs to be a compressed file. Therefore packaged compressed code in a formal environment is very slow (because compression JS code you need to first resolve the code into AST abstract syntax tree with Object indicated, go to the application of various rules and processes AST analysis, this process takes a very large lead )

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
    cache: true,
    parallel: true,
    sourceMap: false
})
复制代码

That there a multi-threaded or multi-process packaging tools do, let alone really have, which is: webpack-parallel-uglify-plugin, when there are multiple webpack JS file needs to be compressed and output to a previously used UglifyJS compression and output, compared UglifyJS, ParallelUglifyPlugin plug-in will open multiple child process multiple files compressed work assigned to multiple child processes to complete, but each child process or go through UglifyJS compressed code, nothing more than to become a parallel multiple sub-task processing efficiency will obviously improve a lot.

First install webpack-parallel-uglify-plugin plugin:

npm i -D webpack-parallel-uglify-plugin
复制代码

Configuration is as follows:

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          /*
           是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
           可以设置为false
          */
          beautify: false,
          /*
           是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
          */
          comments: false
        },
        compress: {
          /*
           是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
           不大的警告
          */
          warnings: false,

          /*
           是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
          */
          drop_console: true,

          /*
           是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
           转换，为了达到更好的压缩效果，可以设置为false
          */
          collapse_vars: true,

          /*
           是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx'  转换成
           var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
          */
          reduce_vars: true
        }
      }
    }),
  ]
}
复制代码

test: Use regular match which files need to be compressed ParallelUglifyPlugin, the default is /.js$/.

include: use regular ParallelUglifyPlugin to contain compressed files, the default is [].

exclude: not to use regular ParallelUglifyPlugin contain compressed files, the default is [].

cacheDir: Results of cache compression, get the next encounter the same input directly from the cache and returns the result of compression, cacheDir for configuring cache storage directory path. The default cache will not want to open the cache set a directory path.

workerCount: open several sub-processes to execute concurrently compression. The default is the current number of CPU cores running computer minus 1

sourceMap: whether to generate the code after compression corresponding Source Map, default is not generated, time-consuming will be greatly increased after opening, sourceMap send the code after compression is generally not the user's browser to the site.

uglifyJS: a compressed configuration when the code ES5, Object type, the direct parameter UglifyJS pass through.

uglifyES: a compressed configuration when the code ES6, Object type, the direct parameter UglifyES pass through.

The final configuration (according to the actual situation choice), packaged in a project to enhance the speed of nearly 20s (54786ms), several tests or less, we can say very substantial

new ParallelUglifyPlugin({
    output:{
      beautify: false,
      comments: false
    },
    compress:{
      warnings: false,
      drop_console: true,
      collapse_vars: true,
      reduce_vars: true
    },
    test: /.js$/g,
    include: [],
    exclude: [],
    cacheDir: '',
    workerCount: '',
    sourceMap: false
 })
复制代码

webpack can be said to be part of the front end engineering indispensable, and now the updated version as relatively fast, how to learn new things, face new problems, fear is unavoidable, and the front end of the road is long, search up and down ,So be it