webpack性能优化

1、优化构建效率；2、优化网络传输效率；3、优化代码执行效率；
webpack层面主要优化的是前两种效率

webpack基本原理

webpack在打包流程的各个阶段都设置了钩子函数，基于这些钩子函数，开发者可以自定义webpack插件，来实现一些强大的自定义功能。

在编译过程中，webpack会对各个模块的导出内容进行缓存，如果在这个过程中，webpack发现这个模块已经存在了缓存，那么就不会重复处理这个模块了

核心流程：

1、命令行执行webpack xxx

2、webpack初始化，包括使用args读取命令行参数，合并webpack配置文件以及命令行参数，形成最终的webpack配置

3、加载entry入口文件代码

4、将入口模块代码转化为抽象语法树

5、遍历抽象语法树，通过分析import以及require函数，分析出入口模块依赖的其他资源

6、转换抽象语法树，将抽象语法树中的import、require函数转化为webpack内置的导入函数，生成最终的代码，并且以导入模块绝对路径为key，将转换的代码以及导出的内容缓存起来

7、开始依次加载导入的其他资源的内容。并将其交给对应的loader进行处理，转化为webpack可以识别的js代码

8、得到依赖模块的js代码之后就继续按照处理入口模块的方式进行处理：构建抽象语法树、分析依赖模块、转换导入语句和函数，缓存模块资源

9、在所有模块分析完毕之后，将所有模块的转换内容合并生成一个bundle

10、生成bundle文件，对bundle内容进行hash