vue路由的异步加载(懒加载)方法。

lncwwn 发布于2019-08-23 11:31 / 661人阅读

摘要：所以我们就需要把某些路由用异步加载懒加载的方式进行加载先来看正常的加载方式下面是第一种异步加载方法下面是第二种异步加载方法因为我们公司的项目整个就是用结合的方式搭建的。

vue本身不多介绍。直接说问题，因为vue的所有路由都是加载在一个app.js里的，如果项目巨大，那么首页加载会是灾难。所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载.

1.先来看正常的加载方式

import Login from "@/components/pages/signIn/signIn";

export default new Router({
  routes: [ {
      path: "/login",
      component: Login,
    }]
});

2.下面是第一种异步加载方法

export default new Router({
  routes: [ {
      path: "/login",
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

3.下面是第二种异步加载方法(因为我们公司的项目整个就是用vue结合webpack的方式搭建的。所以这个方法直接使用是没问题的。如果只是部分的界面使用vue的，可能试一下才能确定能不能用，可能要考虑import能否支持(转化)的问题，毕竟这是ES6新特性)

export default new Router({
  routes: [ {
      path: "/login",
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

海外云主机私有云异步加载js的方法 js实现数据的懒加载图片懒加载懒加载异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97068.html

Vue.js路由懒加载[译]

摘要：所以，那些使用较少的路由组件不必打包进里，只需要在路由被访问时按需加载。写起来像这样空数组用来指定该路由组件需要加载的依赖不过，你最好不要使用这种包裹起来的写法，因为会使用静态分析来检测和分割块。作者：Joshua Bemenderfer 原文地址: lazy-loading-routes 译者：jeneser 当你的SPA（单页应用程序）变得复杂时，打包构建后的Javascript...

beita 2019-08-21 11:54 评论0 收藏0
vue的路由懒加载和组件的按需加载

摘要：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。路由的懒加载按需加载的写法效果按需加载会在页面第一次请求的时候，把相关路由组件块的添加上非按需加载则会把所有的路由组件块的包打在一起。当业务包很大的时候建议用路由的按需加载懒加载。懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要...

Lucky_Boy 2019-08-21 16:50 评论0 收藏0
使用Webpack的代码分离实现Vue懒加载（译文）

摘要：当一个的项目体积变得十分庞大的时候，使用的代码分离功能将，或的代码进行分离并按需加载，会极大的提高的首屏加载速度。如果我们使用函数在中返回模块作为载荷，就实现了懒加载。当一个Vue的项目体积变得十分庞大的时候，使用Webpack的代码分离功能将Vue Components，routes或Vuex的代码进行分离并按需加载，会极大的提高App的首屏加载速度。 showImg(https:...

SmallBoyO 2019-08-23 10:42 评论0 收藏0