摇树优化

注意点

- 一个模块中可能有多个方法，其中的某个方法被用到时，在打包时会将整个模块都打包进去
- tree shaking 就可以在uglify阶段，把没用到的方法擦除，只将用到的方法打包到bundle
- 只支持ES6语法，CJS不支持
- mode为production默认开启
 

DCE（Dead Code Elimination）

- 代码不会被执行
- 代码执行的结果不会被用到
- 代码只会影响死变量（只写不读）

原理

- import export只能作为模块顶层的语句出现
- import的模块名只能是字符串常量
- import binding 是 immutable 的

Scope hoisting

注意点

- 默认情况下，打包后的模块会被闭包函数包裹，模块越多，闭包函数越多，产生的作用域越多，内存消耗越大
- 被webpack转换后的模块，会被闭包函数包裹，同时给闭包函数传入三个参数
- module , __webpack_exports__ , __webpack_require__
- 其中import会被转换为 __webpack_require__
- 转换后的闭包函数被称为模块初始化函数

分析

- 打包出来的是IIFE
- modules是一个数组，每一项是一个模块初始化函数
- __webpack_require用来加载模块，返回module.exports
- 通过webpack_require_method(0) 来启动程序

原理

- 将所有模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量防止变量名冲突
- mode设置production默认开启
- 只支持ES6语法
- 只有被引用一次的模块才会被内联到闭包函数内，超过一次的会被单独打包到一个闭包函数中

代码分割

实现

- CommonJS 通过require.ensure来导入
- ES6 通过babel插件(@babel/plugin-syntax-dynamic-import)实现动态导入

使用

- 将babel插件配置到.babelrc文件的plugins中
- 在需要动态导入的位置通过import('path').then()来实现

EsLint

规范

- 基于eslint：recommend配置来定制
- 对于能够发现代码错误的规则全部开启

实现

- 本地集成：npm i husky，在script中增加 precommit：lint-staged来检查增量代码，具体配置看文档
- CI/CD集成：本地继承时，可以在提交git时通过 --no-verify来跳过husky 在CI之前增加Lint pipeline
- Webpack集成：使用eslint-loader，在配置文件中进行具体规则的配置，或者继承已有的规则