Vue路由懒加载
Vue路由懒加载
对于SPA
单页应用,当打包构建时,JavaScript
包会变得非常大,影响页面加载速度,将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这就是路由的懒加载。
实现方式
Vue异步组件
Vue
允许以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue
只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。
Vue.component("async-example", function (resolve, reject) {
setTimeout(function() {
// 向 `resolve` 回调传递组件定义
resolve({
template: "<div>I am async!</div>"
})
}, 1000)
})
这个工厂函数会收到一个resolve
回调,这个回调函数会在你从服务器得到组件定义的时候被调用,当然也可以调用reject(reason)
来表示加载失败,此处的setTimeout
仅是用来演示异步传递组件定义用。将异步组件和webpack
的code-splitting
功能一起配合使用可以达到懒加载组件的效果。
Vue.component("async-webpack-example", function (resolve) {
// 这个特殊的 `require` 语法将会告诉 webpack
// 自动将你的构建代码切割成多个包,这些包
// 会通过 Ajax 请求加载
require(["./my-async-component"], resolve)
})
也可以在工厂函数中返回一个Promise
,把webpack 2
和ES2015
语法加在一起。
Vue.component(
"async-webpack-example",
// 这个动态导入会返回一个 `Promise` 对象。
() => import("./my-async-component")
)
事实上我们在Vue-Router
的配置上可以直接结合Vue
的异步组件和Webpack
的代码分割功能可以实现路由组件的懒加载,打包后每一个组件生成一个js
文件。
{
path: "/example",
name: "example",
//打包后,每个组件单独生成一个chunk文件
component: reslove => require(["@/views/example.vue"], resolve)
}
动态import
在Webpack2
中,可以使用动态import
语法来定义代码分块点split point
,官方也是推荐使用这种方法,如果使用的是Bable
,需要添加syntax-dynamic-import
插件, 才能使Babel
可以正确的解析语法。
//默认将每个组件,单独打包成一个js文件
const example = () => import("@/views/example.vue")
有时我们想把某个路由下的所有组件都打包在同一个异步块chunk
中,需要使用命名chunk
一个特殊的注释语法来提供chunk name
,需要webpack > 2.4
。
const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue");
const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");
事实上我们在Vue-Router
的配置上可以直接定义懒加载。
{
path: "/example",
name: "example",
//打包后,每个组件单独生成一个chunk文件
component: () => import("@/views/example.vue")
}
webpack提供的require.ensure
使用webpack
的require.ensure
,也可以实现按需加载,同样多个路由指定相同的chunkName
也会合并打包成一个js
文件。
// require.ensure(dependencies: String[], callback: function(require), chunkName: String)
{
path: "/example1",
name: "example1",
component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
},
{
path: "/example2",
name: "example2",
component: resolve => require.ensure([], () => resolve(require("@/views/example2.vue")), "Example")
}
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://zhuanlan.zhihu.com/p/46843949
https://www.jianshu.com/p/c27b1640a01b
https://juejin.im/post/6844904025746309127
https://juejin.im/post/6844904013842874376
https://segmentfault.com/a/1190000011519350
https://cn.vuejs.org/v2/guide/components-dynamic-async.html
https://router.vuejs.org/zh/guide/advanced/lazy-loading.htm
- 基于机器学习方法的POI品类推荐算法
- 【Scikit-Learn 中文文档】多类和多标签算法 - 监督学习 - 用户指南 | ApacheCN
- 【Scikit-Learn 中文文档】新异类和异常值检测 - 无监督学习 - 用户指南 | ApacheCN
- Golang中使用echo框架、MongoDB、JWT搭建REST API
- 在对象的原型上添加方法?
- KMeans聚类算法思想与可视化
- 控制台断点调试
- 函数声明与表达式的区别
- 揭开身份证验证的神秘面纱
- return语句的用法
- JavaScript基础讲解 - 函数与参数
- Go实战--golang中使用RethinkDB(gorethink/gorethink.v3)
- 如何修改alert样式
- 用R语言做数据清理(详细教程)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法