4.7 Lazy Loading懒加载,chunk是什么?

Lazy Loading懒加载

(1)Lazy Loading是什么?
不是webpack 的概念, 是es的概念 webpack能识别出语法,并对代码分割
通过import 异步实现懒加载

(2)问题与解决
例如,hash路由 主页和详情页会同时加载资源。使用懒加载可以当点击详情切换路由时再加载详情信息

(3)优点
不需要时可以不加载,提升访问速度。

(4)注意

不用安装babel-polyfill 因为新版的preset-env已经内置了

使用异步函数

async function getComponent() {
   const {default:_} = await import (/*erbpackChunkName */)
}

[图片上传失败...(image-d8deec-1621820317085)]

Chunk是什么?

打包完每一个文件都是一个chunk(打包的一个片段)


在potionmization中splitChunks的 minChanks:2

  • 如果配置了2,2个以上的文件引入了某个文件,则需要对这个文件进行codeSplitting

  • 如果配置了2,但实际引入的个数少于2,那么就不会没分割这个文件

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容