webpack
2022年4月29日

webpack优化

Aren

编译优化

减少执行构建的模块

编译模块优化的第一个方向就是减少需要执行编译的模块，做的事情少，自然耗费的时间少。

IgnorePlugin

构建的时候剔除需要被排除的模块，从而提升构建模块的速度，减少产物的体积。moment虽然只是引入了moment包，但是构建的时候会自动引入其local目录下面的多国语言包，这个时候就可以使用IgnorePlugin插件讲local目录给忽略掉。

// 剔除被排除的模块
new webpack.IgnorePlugin({
  resourceRegExp: /^\.\/locale$/, // 依赖包下面的目录
  contextRegExp: /moment$/ // 依赖包
  // webpack5 html-webpack-plugin会报错
  // checkResource(resource, context) {
  //     console.log('resource is:', resource);
  //     console.log('context is:', context);
  //     return true;
  // }
}),

按需引入类库模块

按需引入这种优化法一般使用于工具类性质的库，有的时候只是用到了某个库的少数几个方法，但是构建的时候却引入了整个依赖包。这个时候就可以采用按需引入的方法进行构建优化，减少构建时间跟产物的体积。

import split from 'lodash/split';

Tree Shanking也能减少产物的体积，但是跟Tree Shanking的相比，Tree Shanking是需要导入的依赖包使用的是E6的模块化，且Tree Shanking是在优化阶段进行的，而不是在模块编译的时候。

DllPlugin

DllPlugin是另外一种减少构建模块的方式，他的核心思想是将项目依赖的框架模块单独构建打包，与我们开发代码的构建流程区分开来，一般会有一个新的webpack配置文件。DllPlugin通常和DllReferencePlugin配合使用。 DllPlugin插件是将不需要参与项目开发构建的包进行单独build后创建一个 dll-only-bundle，并生成一个json文件，这个文件是用于让 DllReferencePlugin 能够映射到相应的依赖上。DllReferencePlugin插件根据映射的json文件把dll-only-bundles 引用到需要的预编译的依赖中。

Externals

这种方式跟DllPlugin解决的是同一类问题：将依赖的框架等模块从构建过程中移除，不同之处在于：

  • externals不需要单独的webpack配置文件，更加简单
  • DllPlugin是一个独立的构建流程，而externals的配置中不包含依赖框架的生成方式。
  • externals配置的依赖包需要单独指定依赖模块的加载方式：全局对象、CommonJS、AMD等
  • 在引用依赖包的子模块时，DllPlugin无需更改，而externals则会将子模块打入到项目包中。

提升单个模块的构建速度

编译阶段提速的另外一个思路是在维持构建模块数量不变的情况下，提升单个模块的构建速度。

include/exclude

nclude/exclude是常用的优化特定模块构建素的方式之一。include只对符合条件的模块使用指定的Loader进行编译处理。exclude相反，对特定条件下的模块不适用loader处理。 注意：

1、通过include/exclude排除的模块，并不是不进行编译，而是使用webpack默认的js模块编译器你选哪个编译 2、在一个loader中的include与exclude配置存在冲突的情况下，优先使用exclude的配置。

noParse

Webpack 配置中的 module.noParse 则是在上述 include/exclude 的基础上，进一步省略了使用默认 js 模块编译器进行编译的时间

Resolve

Webpack 中的 resolve 配置制定的是在构建时指定查找模块文件的规则，例如：

  • esolve.modules：指定查找模块的目录范围。
  • resolve.extensions：指定查找模块的文件类型范围。
  • resolve.mainFields：指定查找模块的 package.json 中主文件的属性名。
  • resolve.symlinks：指定在查找模块时是否处理软连接。
Share

目录

查看所有文章...