webpack代码分割

代码分离有三种

1. 入口起点：使用entry配置手动分离代码；
2. 防止重复：使用Entry Dependencies或者SplitChunksPlugin去重和分离代码；
3. 动态导入：通过模块的内联函数调用来分离代码；

方法一： 多入口

方法二： SplitChunks

1. 内置包SplitChunksPlugin实现的，直接使用即可

方法三：动态导入

1. 另外一个代码拆分的方式是动态导入时，webpack提供了两种实现动态导入的方式：
   1. import() ，也是目前推荐的方式；
   2. webpack遗留的 require.ensure，目前已经不推荐使用；
2. 比如main.js：
   1. 希望在代码运行中加载它
   2. 因为不确定main.js一定会用到，所以最好拆分成一个独立的js文件；
   3. 这样，如果没用到，浏览器就不加载main.js，这就是动态加载

css代码分离