4.7|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
- 【4.7|4.7 Lazy Loading懒加载,chunk是什么()】如果配置了2,但实际引入的个数少于2,那么就不会没分割这个文件
推荐阅读
- 价值厘清,创造能量2018.4.7
- 2020-11-17|2020-11-17 懒加载 lazy
- YAML|YAML safe loading is not available
- VUE图片懒加载-vue|VUE图片懒加载-vue lazyload
- RCTBridge|RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks
- A【周检视】25组李小伟2019D3(2019.04.01-04.7)
- LoadingCache简单实例,使用google缓存机制缓存每天数据库第一条数据并保存
- loading|水流波动效果的进度条
- java 缓存架构剖析--本地缓存(LoadingCache)
- 2018.4.7感恩之旅第93天