webpack5

Webpack 5 中的效率优化点

1. Persistent Caching

   • Cache 基本配置
     在 Webpack 4 中，cache 只是单个属性的配置，所对应的赋值为 true 或 false，⽤来代表是否启⽤缓存，或者赋值为对象来表示在构建中使⽤的缓存对象。⽽在 Webpack 5 中，cache 配置除了原本的 true 和 false 外，还增加了许多⼦配置项，例如：

     • cache.type：缓存类型。值为 'memory' 或 'filesystem'，分别代表基于内存的临时缓存，以及基于⽂件系统的持久化缓存。在选择 filesystem 的情况下，下⾯介绍的其他属性⽣效。
     • cache.cacheDirectory：缓存⽬录。默认⽬录为 node_modules/.cache/webpack。
     • cache.name：缓存名称。同时也是 cacheDirectory 中的⼦⽬录命名，默认值为 Webpack 的 {config.mode}。
     • cache.cacheLocation：缓存真正的存放地址。默认使⽤的是上述两个属性的组合：path.resolve(cache.cacheDirectory, cache.name)。该属性在赋值情况下将忽略上⾯的 cacheDirectory 和 name 属性。

   • 单个模块的缓存失效
     Webpack 5 会跟踪每个模块的依赖项：fileDependencies、contextDependencies、missingDependencies。当模块本身或其依赖项发⽣变更时，Webpack 能找到所有受影响的模块，并重新进⾏构建处理。

   • 全局的缓存失效
     当模块代码没有发⽣变化，但是构建处理过程本身发⽣变化时（例如升级了 Webpack 版本、修改了配置⽂件、改变了环境变量等），也可能对构建后的产物代码产⽣影响。
     在 Webpack 5 中共提供了 3 种不同维度的全局缓存失效配置：

     • buildDependencies
       第⼀种配置是 cache.buildDependencies，⽤于指定可能对构建过程产⽣影响的依赖项。
     • version
       第⼆种配置是 cache.version。当配置⽂件和代码都没有发⽣变化，但是构建的外部依赖（如环境变量）发⽣变化时，预期的构建产物代码也可能不同。这时就可以使⽤ version 配置来防⽌在外部依赖不同的情况下混⽤了相同的缓存。
     • name
       缓存的名称除了作为默认的缓存⽬录下的⼦⽬录名称外，也起到区分缓存数据的作⽤。这⾥有两点需要补充说明：
       1. name 的特殊性：与 version 或 buildDependencies 等配置不同，name 在默认情况下是作为缓存的⼦⽬录名称存在的，因此可以利⽤ name 保留多套缓存。在 name 切换时，若已存在同名称的缓存，则可以复⽤之前的缓存。与之相⽐，当其他全局配置发⽣变化时，会直接将之前的缓存失效，即使切换回之前已缓存过的设置，也会当作⽆缓存处理。
       2. 当 cacheLocation 配置存在时，将忽略 name 的缓存⽬录功能，上述多套缓存复⽤的功能也将失效。

2. Tree Shaking

   • Nested Tree Shaking
     Webpack 5 增加了对嵌套模块的导出跟踪功能，能够找到那些嵌套在最内层⽽未被使⽤的模块属性。
   • Inner Module Tree Shaking
     Webpack 5 中还增加了分析模块中导出项与导⼊项的依赖关系的功能。通过 optimization.innerGraph（⽣产环境下默认开启）选项，Webpack 5 可以分析特定类型导出项中对导⼊项的依赖关系，从⽽找到更多未被使⽤的导⼊模块并加以移除。
   • CommonJS Tree Shaking
     Webpack 5 中增加了对⼀些 CommonJS ⻛格模块代码的静态分析功功能：
     • ⽀持 exports.xxx、this.exports.xxx、module.exports.xxx 语法的导出分析。
     • ⽀持 object.defineProperty(exports, "xxxx", ...) 语法的导出分析。
     • ⽀持 require('xxxx').xxx 语法的导⼊分析。

3. Logs
   Webpack 5 增加了许多内部处理过程的⽇志，可以通过 stats.logging 来访问。通过这些⽇志能够很好地反映构建各阶段的处理过程、耗费时间，以及缓存使⽤的情况。在⼤多数情况下，它已经能够代替之前⼈⼯编写的统计插件功能了。