webpack打包缓存_webpack 工程师的自我修养：webpack 编译优化

本章内容

1. cache-loader
2. DllPlugin
3. threadLoader

cache-loader

cache-loader 主要是将打包好的文件缓存在硬盘的一个目录里，一般存在 node_modules/.cache 下，当你再次 build 的时候如果此文件没有修改就会从缓存中读取已经编译过的文件，只有有改动的才会被编译，这样就大大降低了编译的时间。尤其是项目越大时越明显。

此项目使用前后数据对比 3342ms --> 2432ms 效果还是比较明显

这里只对 babel 加入了 cache-loader，因为我们的 ts/js 都是由 babel 进行编译的，不需要对 ts-loader 缓存(我们也没有用到)

config/cacheLoader.js

module.exports = (config, resolve) => {  const baseRule = config.module.rule("js").test(/.js|.tsx?$/);  const babelPath = resolve("babel.js");  const babelConf = require(babelPath);  const version = require(resolve("