webpack(4) 进阶使用

1.tree shaking

1.1定义

ree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。

1.2 使用

• 开启 usedExports: true
• 设置被usedExports忽略的文件 如css
• 在项目 package.json 文件中，添加一个 "sideEffects" 属性。

1.3 注意要点

• 其不支持require()格式,因为这种引入格式为动态结构，而tree shaking依赖于静态结构。
• 使用 ES2015 模块语法（即 import 和 export）
• 运行 tree shaking 需要 ModuleConcatenationPlugin。通过 mode: "production" 可以添加此插件。如果你没有使用 mode 设置，记得手动添加 ModuleConcatenationPlugin。
• 通过将 mode 选项设置为 production，启用 minification(代码压缩) 和 tree shaking。
• 其在 development 中配置并不起作用。 你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。