复习webpack4之Lazy Loading懒加载与Chunk

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.Lazy Loading

在之前的笔记中提到了有同步和异步引入库的方式，那么他们有什么不同呢？

举个例子，用vue开发单页面应用的时候，打开首页时，如果不进行懒加载，就会把其他页面的JS一起加载，会造成页面打开速度变慢，如果进行懒加载，在打开页面的时候再去进行相应的JS加载，会让加载速度变得快一些。

用户当前需要用什么功能就只加载这个功能对应的代码，也就是所谓的按需加载

在给单页应用做按需加载优化时，一般采用以下原则：

1.对网站功能进行划分，每一类一个chunk

2.对于首次打开页面需要的功能直接加载，尽快展示给用户

3.某些依赖大量代码的功能点可以按需加载

4.被分割出去的代码需要一个按需加载的时机

2. Chunk

打包生成的每一个js文件，就是一个chunk。在前面的笔记中，minChunk: 1的意思可以这样解释：

比如我们引入了lodash库，打包生成的chunk（js文件）中，至少有一个chunk（js文件）引入了lodash，就对lodash做代码分割。

这一节笔记比较简单，主要是对前两节的笔记做一个总结。

转载于:https://juejin.im/post/5cd2ecefe51d453afb40d83f