开发环境提升构建性能

1. 使用 webpack 的 watch mode(监听模式)。而不使用其他工具来 watch 文件和调用 webpack。内置的 watch mode 会记录时间戳并将此信息传递给 compilation 以使缓存失效。
2. 在某些配置环境中， watch mode 会回退到 poll mode（轮询模式）。监听许多文件会导致 CPU 大量负载。在这些情况下，可以使用 watchOptions.poll 来增加轮询的间隔时间。

1. webpack-dev-server、webpack-hot-middleware、webpack-dev-middleware 通过在内存中（而不是写入磁盘）编译和 serve 资源来提高性能。

1. webpack4 默认使用 stats.toJson() 输出大量数据。除非在增量步骤中做必要的统计，否则请避免获取 stats 对象的部分内容。
2. webepack-dev-server 在 v3.1.3 以后的版本，包含一个重要的性能修复，即最小化每个增量构建步骤中，从 stats 对象获取的数据量。

1. “eval”具有最好的性能，但并不能帮助我们转译代码
2. 如果可以接受稍差一些的 map 质量，可以使用 cheap-source-map 变体配置来提高性能
3. 使用 eval-source-map 变体配置进行增量编译

1. 某些 utility，plugin 和 loader 都只用于生产环境。例如，在开发环境下使用 TerserPlugin 来 minify(压缩)和 mangle(混淆破坏)代码是没有意义的
2. 通常在开发环境下，应该排除以下工具
   1. TerserPlugin
   2. [fullhash]/[chunkhash]/[contenthash]
   3. AggressiveSplittingPlugin
   4. AggressiveMergingPlugin
   5. ModuleConcatenationPlugin

减少输出文件的体积，以提高性能

1. webpakc 只会在文件系统中输出已经更新的 chunk。某些配置选项（HMR，output.chunkFilename的[name]/[chunkhash]/[contenthash]，[fullhash]）来说，除了对已经更新的 chunk 无效之外，对于 entry chunk 也不会生效
2. 下面的配置为运行时代码创建了一个额外的 chunk，所以它的生成代价较低

   module.exports = {
   // ...
   optimization: {
   runtimeChunk: true
   }
   }

避免额外的优化步骤

1. webpack 通过执行额外的算法任务，来优化输出结果的体积和加载性能。这些优化适用于小型代码库，但是在大型代码库中却非常耗费性能

   module.exports = {
   // ...
   optimization: {
   removeAvailableModules: false,
   removeEmptyChunks: false,
   splitChunks: false
   }
   }

输出结果不要带路径信息

1. webpack 会在输出的 bundle 中生成路径信息。然而，在打包数千个模块的项目中，这会造成垃圾回收性能压力。在 options.output.pathinfo 设置中关闭

   module.exports = {
   // ...
   output: {
   pathinfo: false
   }
   }

Node.js 的版本问题

1. Node.js v8.9.20 - v9.11.1 中的 ES2015 Map 和 Set 实现，存在性能回退。webpack 大量地使用这些数据结构，因此这次回退也会影响编译时间。之前和之后的 Node.js 版本不受影响。

TypeScript Loader

1. 可以为 loader 传入 transpileOnly 选项，以缩短使用 ts-loader 时的构建时间。使用此选项，会关闭类型检查。如果要再次开启类型检查，请使用 ForkTsCheckerWebpackPlugin 。使用此插件会将检查过程移至单独的进程，可以加快 TypeScript 的类型检查和ESLint 插入的速度。

   module.exports = {
   // ...
   test: /\.tsx?$/,
   use: [
   {
   loader: 'ts-loader',
   options: {
    transpileOnly: true
   }
   }
   ]
   }

阿松大