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 * 已经改进