Webpack 优化

编译阶段优化

分析准备

速度分析

speed-measure-webpack-plugin

体积分析

webpack-bundle-analyzer

并行构建以提升总体效率

随着目前最新稳定版本 Webpack 4 的发布，人们发现在一般项目的开发阶段和小型项目的各构建流程中已经用不到这种并发的思路了，因为在这些情况下，并发所需要的多进程管理与通信所带来的额外时间成本可能会超过使用工具带来的收益。

HappyPack(不维护了)、thread-loader

thread-loader 会将你的 loader 放置在一个 worker 池里面运行，以达到多线程构建。

rules: [
  {
    test: /\.js$/,
    include: path.resolve("src"),
    use: [
      "thread-loader",
      // your expensive loader (e.g babel-loader)
    ],
  },
];

parallel-webpack

针对与多配置构建。Webpack 的配置文件可以是一个包含多个子配置对象的数组，在执行这类多配置构建时，默认串行执行，而通过 parallel-webpack，就能实现相关配置的并行处理。

生产环境关闭 sourcemap

Externals

与 CDN 配合将大型的库或者框架从打包中移除，使用 CDN

DLL 打包

IgnorePlugin

有的依赖包，除了项目所需的模块内容外，还会附带一些多余的模块。典型的例子是 moment 这个包，一般情况下在构建时会自动引入其 locale 目录下的多国语言包，

    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }),

include/exclude

include 的用途是只对符合条件的模块使用指定 Loader 进行转换处理。而 exclude 则相反，不对特定条件的模块使用该 Loader（例如不使用 babel-loader 处理 node_modules 中的模块）。

rules: [
      {
        test: /\.js$/,
        include: /src|jquery/, //这里的include jquery将不生效，因为exclude优先级更高
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],