优化webpack5打包
作者：shizhishi |
发布时间： |
分类：前端开发 |
声明：个人技术博客 • 非官方 • 仅供技术学习交流
我写了一个React的小项目，我发现打包时间在22秒左右，对于一个小项目来说有点长。 所以我准备用 `thread-loader` 和 `cache-loader` 来优化。 但是由于 `cache-loader` 目前不支持 `webpack5`，而 `webpack5` 拥有自己的插件能实现持久缓存。 因此，我最后...
我写了一个React的小项目，我发现打包时间在22秒左右，对于一个小项目来说有点长。
所以我准备用 `thread-loader` 和 `cache-loader` 来优化。
但是由于 `cache-loader` 目前不支持 `webpack5`，而 `webpack5` 拥有自己的插件能实现持久缓存。
因此，我最后采用 `thread-loader` 实现并发处理，使用 `cache` 实现持久缓存
### 使用 thread-loader
```
// Module/Loaders configuration
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
// exclude: /node_modules/,
exclude: [
/node_modules/,
/server/,
/dist/
],
// use: 'babel-loader',
use: [
'thread-loader', // 并行处理
'babel-loader'
]
},
```
注意：
* thread-loader 需要放在需要优化的、耗时的loader之前
* 不要忘记导包 npm install --save-dev thread-loader
### 使用cache
```
const config = {
cache: {
type: 'filesystem',//开启持久缓存
buildDependencies: {
config: [path.join(__dirname, 'webpack.config.js')],
},
},
};
module.exports = config;
```
buildDependencies是为了使 `webpack.config.js` 发生变化时，使之前的缓存失效
### 结果
之前的打包（消耗22.94s）
在设置完后的第一次打包（消耗16.80s），这时 `thread-loader` 起作用，并且 `cache` 缓存一次
在设置完后的第二次打包（消耗2.92s)，这时资源文件没有变化，并且使用上一次的缓存