如何提高webpack的构建速度 · Issue #106 · TieMuZhen/Blog · GitHub

您所在的位置：网站首页 › webpack的看法以及如何提高构建速度 › 如何提高webpack的构建速度 · Issue #106 · TieMuZhen/Blog · GitHub

如何提高webpack的构建速度 · Issue #106 · TieMuZhen/Blog · GitHub

2023-09-18 07:29| 来源: 网络整理| 查看: 265

一、背景

随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久

构建时间与我们日常开发效率密切相关，当我们本地开发启动devServer或者build的时候，如果时间过长，会大大降低我们的工作效率

二、如何优化

常见的提升构建速度的手段有如下：

优化loader配置合理使用resolve.extensions 优化resolve.modules 优化resolve.alias 使用DLLPlugin插件使用cache-loader terser启动多线程合理使用sourceMap 优化loader配置

在使用loader时，可以通过配置include、exclude、test属性来匹配文件，接触include、exclude规定哪些匹配应用loader

如采用ES6的项目为例，在配置babel-loader时，可以这样：

module.exports = { module: { rules: [ { // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能 test: /\.js$/, // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启 use: ['babel-loader?cacheDirectory'], // 只对项目根目录下的 src 目录中的文件采用 babel-loader include: path.resolve(__dirname, 'src'), }, ] }, }; 合理使用 resolve.extensions

在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库， resolve可以帮助webpack从每个require/import语句中，找到需要引入到合适的模块代码

通过resolve.extensions是解析到文件时自动添加拓展名，默认情况如下：

module.exports = { ... extensions:[".warm",".mjs",".js",".json"] }

当我们引入文件的时候，若没有文件后缀名，则会根据数组内的值依次查找

当我们配置的时候，则不要随便把所有后缀都写在里面，这会调用多次文件的查找，这样就会减慢打包速度

优化 resolve.modules

resolve.modules用于配置webpack去哪些目录下寻找第三方模块。默认值为['node_modules']，所以默认会从node_modules中查找文件当安装的第三方模块都放在项目根目录下的./node_modules目录下时，所以可以指明存放第三方模块的绝对路径，以减少寻找，配置如下：

module.exports = { resolve: { // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤 // 其中 __dirname 表示当前工作目录，也就是项目根目录 modules: [path.resolve(__dirname, 'node_modules')] }, }; 优化 resolve.alias

alias给一些常用的路径起一个别名，特别当我们的项目目录结构比较深的时候，一个文件的路径可能是./../../的形式

通过配置alias以减少查找过程

module.exports = { ... resolve:{ alias:{ "@":path.resolve(__dirname,'./src') } } } 使用 DLLPlugin 插件或者HardSourceWebpackPlugin

就是事先把常用但又构建时间长的代码提前打包好（例如react、react-dom），取个名字叫dll。后面再打包的时候就跳过原来的未打包代码，直接用dll。这样一来，构建时间就会缩短，提高 webpack打包速度。

所以在前端世界里，DLL就是个另类缓存。

但是，由于DLL打包速度慢、配置复杂，所以已经不推荐使用，现在推荐使用HardSourceWebpackPlugin用于为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行两次webpack：第一次构建将花费正常时间。第二个版本将明显更快。适合用在开发模式development和生产模式production下。速度提升的效果是原来的好几倍。

使用 cache-loader

在一些性能开销较大的loader之前添加cache-loader，以将结果缓存到磁盘里，显著提升二次构建速度

保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的loader使用此loader

module.exports = { module: { rules: [ { test: /\.ext$/, use: ['cache-loader', ...loaders], include: path.resolve('src'), }, ], }, }; terser 启动多线程

使用多进程并行运行来提高构建速度

module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: true, }), ], }, }; 合理使用 sourceMap

打包生成 sourceMap的时候，如果信息越详细，打包速度就会越慢

参考文献面试官：如何提高webpack的构建速度？

【本文地址】

如何提高webpack的构建速度 · Issue #106 · TieMuZhen/Blog · GitHub

如何提高webpack的构建速度 · Issue #106 · TieMuZhen/Blog · GitHub

今日新闻

推荐新闻