懒加载
动态加载 import 是 ES6 的草案
浏览器会使用 JSOP 的方式远程去读取一个模块，并放置到 webpackJsonp 全局变量中
import() 会返回一个 promise（* as obj）
const btn = document.querySelector("button");
btn.onclick = async function () {
// webpackChunkName 配置打包时的 chunk 名称，既文件名
const { chunk } = await import(/* webpackChunkName:"lodash" */ "lodash-es");
const result = chunk([3, 5, 6, 7, 87], 2);
console.log(result);
};
预加载
预加载 prefetch 会在使用之前，提前加载 js 文件；
同样需要使用 import 动态导入方式；
正常加载可以认为是并行加载（同一时间加载多个文件） 预加载 prefetch 会等其他资源加载完毕，浏览器空闲了，再加载资源；
const btn = document.querySelector("button");
btn.onclick = async function () {
// webpackPrefetch: true 配置预加载模式
const { chunk } = await import(/* webpackChunkName: 'lodash', webpackPrefetch: true */ "lodash-es");
const result = chunk([3, 5, 6, 7, 87], 2);
console.log(result);
};
懒加载、预加载 的 tree shaking
由于 import 是异步加载的，没办法 tree shaking
可以将使用的 lodash 放入 util.js 中按需导入导出
export { chunk } from "lodash-es"，这样在打包的时候会静态分析进行 tree shaking ，不会将所有的代码打包到结果中；
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue3🛫 共享数据
上一篇
评论
