Open dave-wind opened 1 year ago
场景: A路由 跳转 B路由 解析: 1.A路由离开 触发组件 beforeRouteLeave 2.触发全局路由守卫 beforeEach 可以在此 判断 getToken 判断鉴权 3. 一般如果是 A/1 => A/2 这样 还会触发 beforeRouteUpdate; 拿新的id 可以重新请求接口 4. 调用全局独享守卫 beforeEnter 5. 解析异步的懒加载组件 6. beforeRouteEnter 7. 调用全局解析守卫 beforeResolve 8. 调用全局后置钩子的 afterEach 钩子 9. 继续组件 mounted 生命周期 10. 执行beforeRouteEnter 回调
懒加载原理 首先 代码里写的 import 加载组件方式 webpack 会编译为 webpack_require() 2.动态添加script脚本 请求其资源 3.执行方法 给 全局 modules 注入 动态请求来的资源 4.执行 promise.then
懒加载原理
首先 代码里写的 import 加载组件方式 webpack 会编译为 webpack_require() 2.动态添加script脚本 请求其资源 3.执行方法 给 全局 modules 注入 动态请求来的资源 4.执行 promise.then
// chunkid title promises = []; // 已经安装好的 或者说 加载好的代码块 // key 代码块的名字 // 值为0 表示已经就绪 加载完成 var installedChunks = { main: 0, // title: [resolve,reject,promise] // title: 0 } function require() {
}
// 动态加载 script require.l = (url) => { var script = document.createElement('script'); script.src = url; document.head.appendChild(script); } require.e = (chunkId) => { let installedChunkData; let promise = new Promise((resolve, reject) => { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }) installedChunkData[2] = promise; var url = chunkId + 'main.js'; require.l(url); return promise } function webpackJsonpCallback(data) { let [chunkIds, moreModules] = data; var moduleId, chunkId, i = 0, resolves = []; // 给 全局的 modules 每个模块 赋值 for (moduleId in moreModules) { modules[moduleId] = moreModules[moduleId]; } for (; i < chunkIds.length; i++) { chunkId = chunkIds[i]; resolves.push(installedChunks[chunkIds][0]); installedChunks[chunkIds] = 0; } while (resolves.length) { resolves.shift()(); } }
var chunkLoadingGlobal = window['webpackChunk_2_bundle'] = []; // jsonp 执行方法 chunkLoadingGlobal.push = webpackJsonpCallback;
// 懒加载或者说动态加载title代码块 返回一个promise require.e('title').then(()=> require('./src/title.js')).then(result => { console.log(result); })
window['webpackChunk_2_bundle'].push([ ['title'], { './src/title.js': (module) => { module.exports = 'title'; } } ])
Vue路由跳转过程
main.js 简要代码
// chunkid title promises = []; // 已经安装好的 或者说 加载好的代码块 // key 代码块的名字 // 值为0 表示已经就绪 加载完成 var installedChunks = { main: 0, // title: [resolve,reject,promise] // title: 0 } function require() {
}
// 动态加载 script require.l = (url) => { var script = document.createElement('script'); script.src = url; document.head.appendChild(script); } require.e = (chunkId) => { let installedChunkData; let promise = new Promise((resolve, reject) => { installedChunkData = installedChunks[chunkId] = [resolve, reject]; }) installedChunkData[2] = promise; var url = chunkId + 'main.js'; require.l(url); return promise } function webpackJsonpCallback(data) { let [chunkIds, moreModules] = data; var moduleId, chunkId, i = 0, resolves = []; // 给 全局的 modules 每个模块 赋值 for (moduleId in moreModules) { modules[moduleId] = moreModules[moduleId]; } for (; i < chunkIds.length; i++) { chunkId = chunkIds[i]; resolves.push(installedChunks[chunkIds][0]); installedChunks[chunkIds] = 0; } while (resolves.length) { resolves.shift()(); } }
var chunkLoadingGlobal = window['webpackChunk_2_bundle'] = []; // jsonp 执行方法 chunkLoadingGlobal.push = webpackJsonpCallback;
// 懒加载或者说动态加载title代码块 返回一个promise require.e('title').then(()=> require('./src/title.js')).then(result => { console.log(result); })
xx.main.js 动态加载的js 如下: 这里是title
window['webpackChunk_2_bundle'].push([ ['title'], { './src/title.js': (module) => { module.exports = 'title'; } } ])