#### Please note: this article is mainly optimized for webpack4 JS build speed.

To sum up this article in one sentence, it is to cache the JS build process and make tasks parallel.

CacheDirectory: true; babel-loader: true; Related configurations include cacheIdentifier, which gives a cache an identity, and cacheCompression, which is babel-Loader, which uses gzip to compress by default. If you have a very large number of files try to set it to false.

Cahche is not fast enough. You need to change so many files at once. The cache only works after the first build, and the first build itself is still time consuming. So let’s introduce the second protagonist, Thread-loader. The name of this product knows what it is. Simply put, let your multi-core CPU participate in the packaging process according to its configuration. After this is added, the js rule configuration becomes the following

rules: [
  {
    test: /\.js$/,
    include: /(src)/,
    use: [
      {
        loader: 'thread-loader',
        options: {
          workers: os.cpus().length
        }
      },
      {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [['es2015', { modules: false}].'stage-0'.'react']}}]},Copy the code

The number of workers is the number of CPU cores involved in compilation. The parameters of thread-loader can be roughly divided into workers and pool:

  • WorkerParallelJobs The number of parallel jobs executed in a worker process. The default value is 20
  • WorkerNodeArgs Additional Node. js parameter [‘–max-old-space-size’, ‘1024’]
  • PoolTimeout deletes worker processes when they are idle. The default value is 500ms
  • PoolParallelJobs Number of parallel tasks in a pool

If your project has a lot of CSS files, you might as well add thread-loader to your CSS.

## Uglifyjs-webpack-plugin/uglifyjs-webpack-plugin / #uglifyjs-webpack-plugin / #uglifyjs-webpack-plugin / #uglifyjs-webpack-plugin / #

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: '.uglifyJsCache',
        parallel: os.cpus().length,
        uglifyOptions: {}
      })
   ]
}
Copy the code

Add a cache and parallel.

Well, that’s the end of this article. Give this article a thumbs up if it helped you, and if you have any questions, feel free to discuss them (preferably with code). There is no time comparison in this article, because I don’t think it is meaningful, and different project sizes and parameter Settings can have completely different effects. If the method in this article is suitable for your project, add it to see.