乐趣区

关于webpack:webpack5优化

jiezi

目录

一、构建优化（压缩代码）
二、长期缓存（hash）
三、长久缓存（增量构建）
四、webpack5 新个性
五、总结

一、构建优化（压缩代码）

1、Tree Shaking

（1）usedExports : true 标记出未被导出的变量
（2）minimize : true 去除无用变量并压缩代码

2、合并模块

optimization.concatenateModules = true

3、副作用 sideEffects

（1）optimization.sideEffects = true 开启副作用性能
（2）package.json 中设置 sideEffects : false 标记所有模块无副作用

4、webpack5 改良

（1）嵌套的 tree-shaking
这个例子能够在生产模式下删除导出的 b

（2）外部模块 tree-shaking
webpack5 中有一个新选项 optimization.innerGraph，在生产模式下默认开启，能够对模块中的标记进行剖析，找出导出和援用之间的依赖关系。

  • 外部依赖图算法会找出 something 只有在应用 test 导出时才会应用。这容许将更多的进口标记为未应用，并从代码包中省略更多的代码。
  • 当设置 ”sideEffects”: false 时，若 test 导出未被应用时，./something 将被省略。

（3）其它优化

  • CommonJs Tree Shaking
  • 副作用剖析：能够依据对源代码的动态剖析，主动将模块标记为无副作用
  • 模块合并：反对更多模块，如 ExternalModules 和 json 模块
  • 通用 Tree Shaking 改良
    export * 曾经改良，能够跟踪更多的信息，并且不再将默认导出标记为应用

  • 改良代码生成
    会生成更短的代码 Object(…)->(0, …)
    合并运行时函数

     r.d(x, "a", () => a); r.d(x, "b", () => b); -> r.d(x, {a: () => a, b: () => b});

二、长期缓存（hash）

1、哈希

  • hash

所有 chunk 文件应用雷同的 hash
我的项目中任一文件内容发生变化都会影响所有 chunk 文件 hash

  • chunkhash (不利于 js 和 css 拆散)

基于 webpack 的 entry point
任意文件扭转只会影响其所属的 chunk，不会影响其它 chunk。

  • contenthash

基于文件内容产生的 hash
影响范畴只限于本文件

2、新的问题

webpack 模块 ID 默认是依照依赖程序递增调配的，这会使得依赖了某个呈现改变 chunk 的其余 chunk 内容也跟着变动，导致浏览器缓存生效。增减模块会导致程序错位
（1）webpack4 之前 应用 new webpack.HashedModuleIdsPlugin()
（2）webpack5 新增了长期缓存的算法，在生产模式下是默认启用。

chunkIds: "deterministic" 
moduleIds: "deterministic"
mangleExports: "deterministic"

deterministic 选项有益于长期缓存，生成 bundles 比 hashed 小，比 size 大。稳定性 ID，这是包大小和长期缓存之间的一种衡量

3、webpack5 长期缓存其它优化

（1）真正的 contenthash

webpack4 之前只是针对于文本构造
webpack5 当只有正文被批改或变量被重命名时 将不会促使 hash 扭转

三、长久缓存（增量构建）

cache 配置

  • webpack4 : 反对缓存在内存中
    cache : false/{}
  • webpack5 : 默认存在缓存，能够配置存在硬盘中

四、webpack5 其它新个性

1、加载资源模块

资源模块类型(asset module type)，通过增加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个独自的文件并导出 URL。之前通过应用 file-loader 实现。
  • asset/inline 导出一个资源的 data URI。之前通过应用 url-loader 实现。
  • asset/source 导出资源的源代码。之前通过应用 raw-loader 实现。
  • asset 在导出一个 data URI 和发送一个独自的文件之间主动抉择。之前通过应用 url-loader，并且配置资源体积限度实现。

2、改良 target 配置

容许指定最低版本号

"node10.13''
["web", "es2020"]
"browserslist"

3、入口文件描述符

4、Web 平台个性

  • import.meta

import.meta.webpackHot 是 module.hot 的别名，在严格的 ESM 中也能够应用。
import.meta.webpack 是 webpack 的次要版本号。
import.meta.url 是以后文件的 file: url(相似于__filename，但作为文件 url)

  • 资源模块
    new URL(“./image.png”, import.meta.url)
  • 原生 Worker 反对
    new Worker(new URL(“./worker.js”, import.meta.url))

5、开发反对

  • 在开发模式下，默认用文件名生成 chunk ID 算法

不再须要 import(/ webpackChunkName: “name” / “module”)

  • 模块联邦（微前端）

不同我的项目共享模块

6、不再为 Node.js 模块 主动援用 Polyfills

总结

  1. webpack5 加强了对模块之间依赖的剖析能力，从而晋升了 tree shaking 的能力，如：嵌套、外部依赖、改良代码生成
  2. 长期缓存：webpack5 生产环境默认计算 hash 形式为 deterministic，生成更稳固的 chunkId, 有利于长期缓存
  3. 增量构建：webpack5 丰盛了 cache 配置，能够指定缓存寄存在文件系统中，不容易生效，加大了构建速度
  4. webpack5 新增了一些 web 新个性
  • 资源模块无需应用 loader
  • 不同我的项目之前共享模块
  • 反对通过 import.meta 拜访以后文件门路
  • 反对入口文件描述符，指定依赖
退出移动版