Lazy Loading 懒加载,Chunk是什么

懒加载 import()语法

概念

• 通过import()函数异步的加载模块,在打包的时候(编译阶段),会进行代码分割生成对应js文件(lodash.js),但在运行阶段,当真正执行import()语法的时候对应的模块(lodash.js)才会被载入

实例

• import()函数导入的异步模块构建过程中,进行了代码分割
  
• 在首页加载的时候,首先会加载index.html和main.js
  
• 点击body,懒加载lodash.js
  

懒加载的好处

• 借助import()函数的语法,可以让页面的加载速度更快,比如刷新页面的时候,根本用不到lodash.js,只需要加载main.js就可以了,lodash.js这部分的代码不会被额外的载入到页面上
• vue-router:访问不同路由的时候,会展示不同的页面组件,实际上如果这些页面的代码都打包在一个文件里,然后访问项目首页的时候,把其他路由的页面一起都加载了,实际上首页只需要加载首页的代码,不需要加载其他路由下的页面代码,遇到这种情况,就可以把不同路由下的页面代码进行代码分割,当我们做路由切换的时候,通过异步组件的形式,把对应页面的代码载入进来执行就可以了,这样让每页页面的加载速度更快
• 路由懒加载文章

chunks

概念

• 在webpack打包过程中,生成了几个js文件,每个js文件都是一个chunk(是js文件,而不是其他类型文件)