简介

本章继续介绍一些细节上的优化。

6. 控制包文件大小

及时删除无用的模块，不要引入无用的文件，使用 treeshaking 尽量减少包体。也可以利用 splitchunks 将包文件切割，有效率利用缓存。

7. 多进程打包

webpack 本身是单线程打包，将其扩展为多进程模式，可以分利用多核的优势。关于中丝路，目前有以下三种解决方案：

7.1 thread-loader

把这个 loader 放置在其他 loader 之前， 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行。
在 worker 池(worker pool)中运行的 loader 是受到限制的。例如：

• 这些 loader 不能产生新的文件。
• 这些 loader 不能使用定制的 loader API（也就是说，通过插件）。
• 这些 loader 无法获取 webpack 的选项设置。
• 每个 worker 都是一个单独的有 600ms 限制的 node.js 进程。同时跨进程的数据交换也会被限制。

应该仅在耗时的 loader 上使用。

npm install --save-dev thread-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader",
          "expensive-loader"
        ]
      }
    ]
  }
}

7.2 happypack

happypack 的处理思路是将原有的 webpack 对 loader 的执行过程从单一进程的形式扩展多进程模式，原本的流程保持不变。其详细原理可以参考 happypack 原理解析

npm install --save-dev happypack

// @file: webpack.config.js
const HappyPack = require('happypack');

exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};

exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: [ 'babel-loader?presets[]=es2015' ]
  })
];

7.3 并行压缩

这个是专门针对压缩阶段的并行处理，因为打包过程中压缩基本上是最耗时的阶段了。

7.3.1 webpack-parallel-uglify-plugin（webpack3使用）

如果使用 webpack4，就不用关注这个了。

import ParallelUglifyPlugin from 'webpack-parallel-uglify-plugin';
 
module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      // Optional regex, or array of regex to match file against. Only matching files get minified.
      // Defaults to /.js$/, any file ending in .js.
      test,
      include, // Optional regex, or array of regex to include in minification. Only matching files get minified.
      exclude, // Optional regex, or array of regex to exclude from minification. Matching files are not minified.
      cacheDir, // Optional absolute path to use as a cache. If not provided, caching will not be used.
      workerCount, // Optional int. Number of workers to run uglify. Defaults to num of cpus - 1 or asset count (whichever is smaller)
      sourceMap, // Optional Boolean. This slows down the compilation. Defaults to false.
      uglifyJS: {
        // These pass straight through to uglify-js@3.
        // Cannot be used with uglifyES.
        // Defaults to {} if not neither uglifyJS or uglifyES are provided.
        // You should use this option if you need to ensure es5 support. uglify-js will produce an error message
        // if it comes across any es6 code that it can't parse.
      },
      uglifyES: {
        // These pass straight through to uglify-es.
        // Cannot be used with uglifyJS.
        // uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
        // files that you're minifying do not need to run in older browsers/versions of node.
      }
    }),
  ],
};

7.3.2 uglifyjs-webpack-plugin （webpack4 的 production mode 默认启用）

webpack4 默认启用，一般无需关心。
[
new UglifyJsPlugin({
uglifyOptions: {
ie8: false,
ecma: 8,
parse: {...options},
mangle: {
...options,
properties: {
// mangle property options
}
},
output: {
comments: false,
beautify: false,
...options
},
compress: {...options},
warnings: false
}
})
]

7.3.3 terser-webpack-plugin （推荐使用）

terser 较 uglifyjs 压缩性能更好，推荐使用。而且用法很简单，webpack4 支持在 optimization 配置中指定压缩插件。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

8. 合理使用 sourcemap

这个可以参考前面讲解 sourceMap的配置 的章节。

9. 利用分析工具

这个可以参考前面讲解 打包分析的章节，由其关注以下两个工具。

• speed-measure-webpack-plugin: This plugin measures your webpack build speed, giving an output.
• webpack-bundle-analyzer: A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.

10. 开发环境内存读取

使用 dev-server

11. 开发环境无用插件剔除

其实就是设置成 development，然后尽量少引入一些不必要的产检，比如开发环境完全没必要压缩。

参考

即刻起，加速您的前端构建
webpack打包极限优化
性能
happypack 原理解析
webpack4配置总结(六)webpack4提升180%编译速度
webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）