说说提高Webpack的构建速度的手段有哪些?

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

[[398345]]

本文转载自微信公众号「JS每日一题」,作者灰灰。转载本文请联系JS每日一题公众号。

一、背景

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

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

所以,优化webpack 构建速度是十分重要的环节

二、如何优化

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

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

优化loader配置

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

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

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

合理使用 resolve.extensions

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

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

  1. module.exports = { 
  2.     ... 
  3.     extensions:[".warm",".mjs",".js",".json"

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

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

优化 resolve.modules

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

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

优化 resolve.alias

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

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

  1. module.exports = { 
  2.     ... 
  3.     resolve:{ 
  4.         alias:{ 
  5.             "@":path.resolve(__dirname,'./src'
  6.         } 
  7.     } 

使用 DLLPlugin 插件

DLL全称是 动态链接库,是为软件在winodw中实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库。这个库在之后的编译过程中,会被引入到其他项目的代码中

使用步骤分成两部分:

  • 打包一个 DLL 库
  • 引入 DLL 库

打包一个 DLL 库

webpack内置了一个DllPlugin可以帮助我们打包一个DLL的库文件

  1. module.exports = { 
  2.     ... 
  3.     plugins:[ 
  4.         new webpack.DllPlugin({ 
  5.             name:'dll_[name]'
  6.             path:path.resolve(__dirname,"./dll/[name].mainfest.json"
  7.         }) 
  8.     ] 

引入 DLL 库

使用 webpack 自带的 DllReferencePlugin 插件对 mainfest.json 映射文件进行分析,获取要使用的DLL库

然后再通过AddAssetHtmlPlugin插件,将我们打包的DLL库引入到Html模块中

  1. module.exports = { 
  2.     ... 
  3.     new webpack.DllReferencePlugin({ 
  4.         context:path.resolve(__dirname,"./dll/dll_react.js"), 
  5.         mainfest:path.resolve(__dirname,"./dll/react.mainfest.json"
  6.     }), 
  7.     new AddAssetHtmlPlugin({ 
  8.         outputPath:"./auto"
  9.         filepath:path.resolve(__dirname,"./dll/dll_react.js"
  10.     }) 

使用 cache-loader

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

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

  1. module.exports = { 
  2.     module: { 
  3.         rules: [ 
  4.             { 
  5.                 test: /\.ext$/, 
  6.                 use: ['cache-loader', ...loaders], 
  7.                 include: path.resolve('src'), 
  8.             }, 
  9.         ], 
  10.     }, 
  11. }; 

terser 启动多线程

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

  1. module.exports = { 
  2.   optimization: { 
  3.     minimizer: [ 
  4.       new TerserPlugin({ 
  5.         parallel: true
  6.       }), 
  7.     ], 
  8.   }, 
  9. }; 

合理使用 sourceMap

打包生成 sourceMap 的时候,如果信息越详细,打包速度就会越慢。对应属性取值如下所示:

三、总结

可以看到,优化webpack构建的方式有很多,主要可以从优化搜索时间、缩小文件搜索范围、减少不必要的编译等方面入手

参考文献

  • https://github.com/ly2011/blog/issues/44
  • https://xie.infoq.cn/article/541418eb82a674741a0ad8865
  • https://zhuanlan.zhihu.com/p/139498741
  • https://vue3js.cn/interview

 

责任编辑:武晓燕 来源: JS每日一题
相关推荐

2021-08-02 08:34:20

React性能优化

2024-09-27 11:46:51

2019-03-15 15:00:49

Webpack构建速度前端

2021-12-24 08:01:44

Webpack优化打包

2024-05-27 00:00:01

2010-09-14 15:17:51

2021-08-11 08:53:23

Git命令面试

2013-07-08 16:24:13

软件定义网络SDN

2024-03-07 17:21:12

HotSpotJVMHot Code

2021-09-30 07:57:13

排序算法面试

2021-05-27 05:37:10

HTTP请求头浏览器

2011-05-30 13:15:05

PHP

2011-05-30 13:28:00

PHP

2024-02-21 07:40:17

JVM内存虚拟机

2010-06-18 12:37:04

SQL Server查

2010-09-30 14:38:13

2010-07-16 13:48:08

SQL Server合

2021-09-27 06:50:04

非线性数据

2021-09-26 10:57:16

集合操作场景

2010-04-22 17:27:04

Oracle数据库
点赞
收藏

51CTO技术栈公众号