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

蓓蕾心晴

发布于 2022-12-29 14:10:42

1.9K0

发布于 2022-12-29 14:10:42

文章被收录于专栏：前端小叙

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-28，如有侵权请联系 cloudcommunity@tencent.com 删除

webpack