vue如何实现路由根据开发状态懒加载
小编给大家分享一下vue如何实现路由根据开发状态懒加载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专注于企业营销型网站建设、网站重做改版、潜山网站定制设计、自适应品牌网站建设、HTML5、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为潜山等各大城市提供网站开发制作服务。
路由根据开发状态懒加载
1 一般情况
一般我们在路由中加载组件的时候:
import Login from '@/views/login.vue' export default new Router({ routes: [{ path: '/login', name: '登陆', component: Login}] })
当你需要懒加载 lazy-loading 的时候,需要一个个把routes的component改为 () => import('@/views/login.vue') ,甚为麻烦。
当你的项目页面越来越多之后,在开发环境之中使用 lazy-loading 会变得不太合适,每次更改代码触发热更新都会变得非常的慢。所以建议只在生成环境之中使用路由懒加载功能。
2 优化
根据Vue的异步组件和Webpack的代码分割功能可以轻松实现组件的懒加载,如:
const Foo = () => import('./Foo.vue')
在区分开发环境与生产环境时,可以在路由文件夹下分别新建两个文件: _import_production.js
module.exports = file => () => import('@/views/' + file + '.vue')
_import_development.js ,这种写法 vue-loader 版本至少v13.0.0以上
module.exports = file => require('@/views/' + file + '.vue').default
而在设置路由的 router/index.js 文件中:
const _import = require('./_import_' + process.env.NODE_ENV) export default new Router({ routes: [{ path: '/login', name: '登陆', component: _import('login/index') }] })
这样组件在开发环境下就是非懒加载,生产环境下就是懒加载的了
以上是“vue如何实现路由根据开发状态懒加载”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网页名称:vue如何实现路由根据开发状态懒加载
链接URL:http://azwzsj.com/article/gohgoh.html