webpack笔记# 按需引入和Treeshaking的区别 | tree shaking+code split代码分割

前端架构设计 - 系列 |

***** webpack二刷之五、生产环境优化（3.sideEffects 副作用）

// webpack.config.js
// Webpack4.0 以上版本在 mode 为 production 时，会自动开启 Tree Shaking 能力。默认 production mode 的配置如下：
const config = {
 mode: 'production',
 optimization: {
  usedExports: true,
  minimizer: [
   new TerserPlugin({...}) // 支持删除死代码的压缩器
  ],
  sideEffects: true // 默认false，表示是否移除无副作用的模块
 }
}

// package.json
{
  "sideEffects": [
    "./src/extend.js", // 标识有副作用的文件
    "*.css", // 也可以使用路径通配符
    "style/" // 注意目录必须带后面的/
  ]
}
// 使用webpack sideEffects功能的前提是，确保代码没有副作用。
// 否则webpack打包时就会误删那些有副作用的代码。
// 例如导入一个模块，它的内容是立即执行的，而不是通过导出成员等待被调用。
// /src/extend.js 
window.onload = () => { 
    alert('This is a side effect code') 
} 
// /src/index.js 
import './extend'

package.json和webpack配置文件中的sideEffects虽然同名，但表示的意义不同。
    - package.json的sideEffects：标识当前package.json所影响的项目，当中所有的代码是否有副作用
        - 默认true，表示当前项目中的代码有副作用
    - webpack配置文件中的sideEffects：开启功能，是否移除无副作用的代码
        - 默认false，表示不移除无副作用的模块
        - 在production模式下自动开启。
webpack不会识别代码是否有副作用，只会读取package.json的sideEffects字段。
二者需要配合使用，才能处理无副作用的模块。

Tree Shaking -> webpack(optimization sideEffects) -> package.json(sideEffects)（css文件一般都会被手动标明，否则会被tree shaking 掉；还有一些仅做执行的js 如：import './some-exec.js';） -> usedExports标记 -> 根据标记使用webpack插件（minimize / TerserPlugin）清除没有用到的代码
postcss css版的tree shaking （如何遍历所有 CSS 文件的选择器呢？Babel 依靠 AST 技术，完成了对 JavaScript 代码的遍历分析，而在样式世界中，PostCSS 就起到了 Babel 的作用。PostCSS 提供了一个解析器，它能够将 CSS 解析成 AST 抽象语法树，我们可以通过 PostCSS 插件对 CSS 对应的 AST 进行操作，达到 Tree Shaking 的目的。）
- 遍历所有 CSS 文件的选择器；
- 根据所有 CSS 文件的选择器，在 JavaScript 代码中进行选择器匹配；
- 如果没有匹配到，则删除对应选择器的样式代码。