webpack 合并压缩_webpack5优化

目录

一、构建优化(压缩代码)

二、长期缓存(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

内部依赖图算法会找出 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

总结

webpack5增强了对模块之间依赖的分析能力，从而提升了tree shaking的能力，如：嵌套、内部依赖、改进代码生成

长期缓存： webpack5 生产环境默认计算hash方式为deterministic，生成更稳定的chunkId, 有利于长期缓存

增量构建：webpack5 丰富了cache配置，可以指定缓存存放在文件系统中，不容易失效，加大了构建速度

webpack5新增了一些web新特性

资源模块无需使用loader

不同项目之前共享模块

支持通过import.meta访问当前文件路径

支持入口文件描述符，指定依赖