Webpack学习篇

发布于 2022年 01月 24日 00:40

《深入浅出Webpack》优化篇 01

Webpack 优化可以分为开发优化和输出质量优化两部分,主要要点如下:

  1. 优化开发体验,提升开发效率
    • 优化构建速度
    • 优化使用体验
  2. 优化输出质量
    • 减少首屏加载时间
    • 提升流畅度

本文主要记录 优化构建速度这一部分的内容,本文主要内容如下:

  • 缩小文件的搜索范围
    • 优化Loader的配置
    • 优化resolve.modules的配置
    • 优化resolve.mainFields配置
    • 优化resolve.alias配置
    • 优化resolve.extensions配置
    • 优化module.noParse配置

缩小文件的搜索范围

为什么缩小文件搜索范围可以进行优化?
因为webpack会从entry出发,解析文件导入语句,递归进行解析。遇到导入语句时候,webpack会做以下两件事:

  1. 根据导入语句寻找导入文件
  2. 根据找到的导入文件的后缀,使用配置的Loader去处理文件。比如我们在兼容低版本浏览器的时候会采用babel-loader将代码编译成ES6之前的代码
    在实际开发中,这样的问题无法避免,但是仍需要减少这两件事的发生,以提高速度
优化Loader配置

因为Loader处理文件的转换操作很耗时,所以需要尽可能的减少文件的转换。
可以通过 test、include、exclude 三个配置来命中要转换的文件。为了尽可能少的让文件被Loader处理,我们可以通过include来选中哪些文件需要处理.
举例:

优化resolve.modules配置

resolve.modules的作用是去哪些根目录下寻找第三方模块,默认值是['node_modules'].含义是先去当前的./node_modules目录下去找,如果没找到就往上一级目录,../node_modules,如果还没找到就再往上 ../../node_modules中找,依次类推,大多数情况下,我们的node_modules都是在项目根目录下的,就没有必要再去一级一级查找了,可以直接指明绝对路径,以减少寻找花费的时间。举例:

优化resolve.mainFields配置

安装的第三方包都会有一个package.json文件,某些字段会体现出第三方模块的使用入口在哪里,resolve.mainFields用于配置采用哪个字段作为入口文件的描述,我们可以从axios的package.json中看到如下信息:


然后翻阅axios的源文件,可以看到default.js的如下代码:

可见,axios是同时支持node和浏览器环境的,再来看mainFields字段,他的默认值跟target配置有关系,当target为web或者webworker时,值是[
'browser','module','main'
],当target为其他情况则是['module','main'],为了减少搜索步骤,在明确所有第三方模块的入口文件描述字段的时候,我们可以将其尽可能的设置少。但是使用此配置优化时候,需要考虑到所有运行时的依赖的第三方模块的入口文件描述字段,只要搞错一个,代码就会无法运行

优化resolve.alias配置

该配置是用来优化第三方模块的引入路径的,打个比方,react库在安装的时候会包含两套代码,一套是采用commonJS规范的模块化代码,一套是将React所有相关代码都打包到一个react.js文件中,默认情况下,webpack会从react的入口文件递归解析和处理依赖的几十个文件,工作量非常大。通过配置resolve.alias可以让webpack处理react库的同时,直接使用完整的react.min.js文件,从而跳过耗时的递归解析操作。举例如下:

不过,这样我们的代码可能会包含很多我们压根不会用上的代码,当我们使用的包很大,但是我们用到的东西确很少时候,还是要慎重选择此优化方式。

优化resolve.extensions配置

我们在使用脚手架的时候肯定会发现,即使我们不用加文件扩展名,导入也生效。默认情况下,webpack会尝试给没有文件扩展名的文件添加扩展名,然后再去查找文件是否存在。extensions的默认值是['.js','.json'],如果这个列表越来越长,或者正确的后缀越往后,就会造成尝试的次数越多,所以遵守以下几点,可以优化构建性能:

  1. 后缀列表尽可能的小,不要将不可能的情况写到列表中
  2. 频繁出现的放在最前面
  3. 在源码中尽可能带上后缀名
优化module.noParse配置

noParse配置可以让webpack忽略对部分没有采用模块化的文件的递归解析,比如jQuery这样的库,很大并且没有模块化,解析是一件无意义的事情,配置如下:

好了,以上就是今天的全部内容.
2021-12-12 00:16:14 星期日

推荐文章