zl程序教程

您现在的位置是:首页 >  Java

当前栏目

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

2023-02-18 16:47:30 时间

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',如需配置其他配置选项,请安装最新版本。