-
vue路由懒加载
2020-11-10 17:48:31vue路由懒加载 一 、为什么要使用懒加载 可以加载页面更快,给客户更好的体验。 二、使用懒加载 常用的懒加载有两种方法:vue异步组件和ES中的import。 1.不使用懒加载 import Vue from 'vue' import ...vue路由懒加载
一 、为什么要使用懒加载 可以加载页面更快,给客户更好的体验。 二、使用懒加载 常用的懒加载有两种方法:vue异步组件和ES中的import。
1.不使用懒加载
import Vue from 'vue' import Router from 'vue-router' import Login from './../pages/Login/Login' Vue.use(Router) export default new Router({ routes: [ { path: "/Login", name: "Login", component:Login, } ] })
2.vue异步组件实现懒加载
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: "/Login", name: "Login", component: resolve => (require(['./../pages/Login/Login'], resolve)), } ] })
3.ES提出的import方法
import Vue from 'vue' import Router from 'vue-router' const Login= () => import ('./../pages/Login/Login') Vue.use(Router) export default new Router({ routes: [ { path: "/Login", name: "Login", component: Login, } ] })
-
vue 路由懒加载
2020-05-07 17:24:27vue 路由懒加载 { path: '/', name: 'test', component: () => import('./test') }, 路由懒加载:按需加载路由,加快启动速度,路由切换速度会有影响,在大量路由的项目中可以使用,优化项目启动速度。 ...vue 路由懒加载
{ path: '/', name: 'test', component: () => import('./test') },
路由懒加载:按需加载路由,加快启动速度,路由切换速度会有影响,在大量路由的项目中可以使用,优化项目启动速度。
-
Vue路由懒加载
2020-10-24 10:39:46Vue路由懒加载 对于SPA单页应用,当打包构建时,JavaScript包会变得非常大,影响页面加载速度,将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这就是路由的懒加载。 实现方式 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
-
VUE路由懒加载
2020-08-05 16:33:36为什么需要路由懒加载? 使用懒加载前 import Vue from 'vue' import Router from 'vue-router' import find from "../common/find.vue" import my from "../common/my" import friend from "../common/friend" ...为什么需要路由懒加载?
使用懒加载前import Vue from 'vue' import Router from 'vue-router' import find from "../common/find.vue" import my from "../common/my" import friend from "../common/friend" import message from "../common/message" import unLogin from "../components/unLogin" import error from "../common/error" import searchResult from "../common/searchResult" Vue.use(Router) export default new Router({ mode: 'history', routes:[ { path:'*', component:error, meta: {allowBack: false} }, { path: '/', name: 'mes', component: find, meta: {allowBack: false} }, { path: '/my', name: 'mes', component: my, meta: {allowBack: false} }, { path: '/friend', name: 'mes', component: friend, meta: {allowBack: false} }, { path: '/message', name: 'mes', component: message, meta: {allowBack: false} }, { path: '/unLogin', name: 'mes', component: unLogin, meta: {allowBack: false} }, { path: '/search', name: 'mes', component: searchResult } ] })
使用懒加载
import Vue from 'vue' import Router from 'vue-router' const find = ()=>import('../common/find.vue')//会动态加载组件 const my = ()=>import('../common/my') const friend = ()=>import('../common/friend') const message = ()=>import('../common/message.vue') const unLogin = ()=>import('../components/unLogin') const error = ()=>import('../common/error.vue') const searchResult = ()=>import('../common/searchResult.vue') Vue.use(Router) export default new Router({ mode: 'history', routes:[ { path:'*', component:error, meta: {allowBack: false} }, { path: '/', name: 'mes', component: find, meta: {allowBack: false} }, { path: '/my', name: 'mes', component: my, meta: {allowBack: false} }, { path: '/friend', name: 'mes', component: friend, meta: {allowBack: false} }, { path: '/message', name: 'mes', component: message, meta: {allowBack: false} }, { path: '/unLogin', name: 'mes', component: unLogin, meta: {allowBack: false} }, { path: '/search', name: 'mes', component: searchResult } ] })
-
VUE 路由懒加载
2020-04-03 17:02:18文件路径,在vue项目...//以下是import方法路由懒加载,测试方法,看network浏览器监控 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { p... -
Vue 路由懒加载
2019-10-07 05:36:371、vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) 2、es提出的import(推荐使用这种方式) const HelloWorld = ()=>import('需要加载的模块地址') 详情... -
Vue路由懒加载.md
2021-01-14 10:08:31Vue路由懒加载.md