webpack 2.0.1 juejin.cn/post/684490…
通过对 webpack2.0.1的操作和配置，webapck的code splitting已经有了初步的了解，而webapck在做代码分割时chunks的默认配置项为异步，而webpack为什么不是采用all同步+异步的方式呢？这是因为webpack推荐使用异步代码编写的方式编写代码。也就是 lazy loading。⚠️
webpack - Lazy Loading
webpack 1.0.7 juejin.cn/post/684490…
如果你使用webpack1.0.7进行打包时，你会发现所有业务逻辑都会被压缩到一个js文件中，这是因为webpack会默认把所有页面的业务逻辑都压缩到一个js文件中。这样就会造成性能低下，比如在加载首页时会加载所有页面的js文件，而不仅仅是首页要用到的业务逻辑。如果你做一个很小的项目，js文件不超过1Mb,是没有必要做懒加载的（经验）。
懒加载是通过 import 来实现的。当异步代码执行import语法时才会进行懒加载。
不管你现在使用的是 Vue,React还是Angular去开发项目，都可以在路由或者组件中使用懒加载。具体看业务需求来写异步代码。这样就极大的提升了页面加载速度，优化了用户体验。
⚠️懒加载和webpack无关，webpack只是能够识别出import语法，所以在没有配置代码分割时也会对异步代码进行分割。
⚠️前端性能优化并不是简单的缓存，而是代码的利用率。
使用coverage去查看淘宝的首页代码的利用率为53%，当然这没有可比性，因为展示性高的网站，利用率较低。
Vue项目举例:
路由内：
path:'/',
name:'Home',
component:() => import ('@/pages/home/Home')
组件引入内:
components:{
HomeHeader:() =>import ('./components/Header')
}
组件内：
import （/*webpackPrefetch:true*/ ‘./main.js’）.then( () => { })
/*webpackPrefetch:true*/ //魔法注释，核心代码加载完成之后加载,有浏览器兼容问题。即使有兼容问题，不能凑效，并不影响功能。
/*webpackPreload:true*/ //魔法注释，和核心代码共同加载，有浏览器兼容问题。即使有兼容问题，不能凑效，并不影响功能。
