webpack5 配置多线程和缓存加快构建速度

webpack5 内置了缓存配置

在 webpack 配置对象下，增加：

cache: {
        type: 'filesystem',
        allowCollectingMemory: true
    }

webpack5 可以通过引入 thread-loader 来开启多线程

{
                test: /\.js$/,
                include: src,
                use: [
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: 8
                        }
                    },
                    {
                        loader: 'babel-loader'
                    }
                ]
            },

webpack 官方文档

https://webpack.js.org/configuration/cache/

https://webpack.js.org/loaders/thread-loader/#root

 

配置  thread-loader  后，我的打包时间从 29665ms 提升到了 20553ms，大约提升 9 秒的构建时间；

开启 cache 缓存后，首次构建时间 38528ms，二次构建时间 847ms。

注意：webpack 5.35.0 版本之前，cache仅支持配置 'memory'，如需配置其他配置选项，请安装最新版本。

webpack cache好文收藏