vue-router路由懒加载

vue中使用el-dialog + axios 实现拦截器

路由懒加载

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

直接打包的缺点:

  1. 直接打包会生成一个特别大的js文件,页面加载,影响页面加载效率。
  2. 当不要其他组件的时候,也会一起加载进来。

懒加载是利用了,Vue 的异步组件和 Webpack 的代码分割功能

  1. 可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):
const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
  1. 在 Webpack中,我们可以使用动态 import语法来定义代码分块点 (split point)
import('./Foo.vue') // 返回 Promise

注意:如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

npm install --save-dev babel-plugin-syntax-dynamic-import
  1. 两者结合
const Foo = () => import('./Foo.vue')
const Login = () => (import('@/components/Login'))

这样就实现了路由的按需加载,懒加载。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 老娘忍着姨妈带来的剧烈疼痛(就差冲动请假回去休息了),半死似的在工位上跟着别人搭建好的框架开始学习,然而又被一句短...
    等花开_8e16阅读 2,430评论 0 1
  • 有时候打包时,js文件会非常大,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,...
    honglingdai阅读 317评论 0 1
  • 正常配置 懒加载配置 说明 npm run build后会新增路由数量相匹配的.js文件,在切到相应路由时动态加载...
    后除阅读 434评论 2 2
  • 把《敦刻尔克》的影评写完以后,心里少了些底气,因为我想到的是,自己的观点是否又是流于表面。看完了《传媒志》的一篇评...
    塞尔维亚i阅读 520评论 0 3
  • 1985年初,我从承德地委宣传部调石家庄地区建设日报。刚到报社时领导让我先去校对科。校对是晚上八点上,一般是第二天...
    海天明月阅读 583评论 9 43