模块化四—webpack在项目中优化
一 抽象语法树（Abstract Syntax Tree）:
1 AST: JavaScript Parser 会把代码转化为一颗抽象语法树（AST），这颗树定义了代码的结构，通过操纵这颗树，我们可以精准的定位到声明语句、赋值语句、运算语句等等，实现对代码的分析、优化、变更等操作。
2 AST用途：
- 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
- 如 JSLint、JSHint 对代码错误或风格的检查，发现一些潜在的错误
- IDE 的错误提示、格式化、高亮、自动补全等等
- 代码混淆压缩
- UglifyJS2 等
- 优化变更代码，改变代码结构使达到想要的结构
- 代码打包工具 Webpack、Rollup 等等
- CommonJS、AMD、CMD、UMD 等代码规范之间的转化
- CoffeeScript、TypeScript、JSX 等转化为原生 Javascript
3 webpack 简单实现：https://juejin.cn/post/6844903966849892359#heading-22
二 Webpack优化
1 webpack在项目中的优化：
- 代码分割通过抽取公共包的代码，较少资源加载的体积
- 通过tree-shaking 删除未引用的代码，通过UglifyJsPlugin进行代码压缩。
- webpack 懒加载，主要通过import()方法实现；webpack懒加载（动态加载）
2 webpack代码分割：(splitChunks精细控制代码分割)webpack 中以下三种常见的代码分割方式:
- 入口起点：使用
entry配置手动地分离代码。 - 动态导入：通过模块的内联函数调用来分离代码。
- 防止重复：使用
splitChunks去重和分离 chunk。 第一种方式，很简单，只需要在entry里配置多个入口即可：
3 webpack热替换原理：webpack热替换原理
4懒加载与预加载：
推荐阅读：
file-loader使用：https://www.jianshu.com/p/d18980a6d779
用 babel-plugin 实现按需加载:https://zhuanlan.zhihu.com/p/210280253
