webpack build performance about mrbone.github.io

[mrbone]

提高 webpack build 时间的方式有几种

• 升级 node 和 webpack 的版本

loaders

减少需要使用 loaders 的文件数量

{
  test: /\.js$/,
+  include: path.resolve(__dirname, "src"),
  loader: "babel-loader"
}

Bootstrap

plugin/loader 都有启动时间，所以使用的越少越好。

Resolve

减少检索文件的数量同样可以提高速度。如下的方式都可以：

• 减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 的数量。
• 设置 resolve.symlinks: false
• 设置 resolve.cacheWithContext: false

Dlls

使用 DllPlugin 让不常变化的 module 走单独的构建。

chunk 越小越好

Worker Pool

缓存持久化

使用 cache-loader

Production 建议

SourceMap

关闭 soucemap

特殊工具的

Babel

尽量少使用 presets/plugins

Ts

• 使用 fork-ts-checker-webpack-plugin。
• 让 loaders 跳过类型效验。
• ts-loader 下开启 happyPackMode: true / transpileOnly: true

参考资料

官网