小編給大家分享一下vue如何實現(xiàn)路由根據(jù)開發(fā)狀態(tài)懶加載，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、潛山網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、HTML5、商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為潛山等各大城市提供網(wǎng)站開發(fā)制作服務。

路由根據(jù)開發(fā)狀態(tài)懶加載

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') ，甚為麻煩。

當你的項目頁面越來越多之后，在開發(fā)環(huán)境之中使用 lazy-loading 會變得不太合適，每次更改代碼觸發(fā)熱更新都會變得非常的慢。所以建議只在生成環(huán)境之中使用路由懶加載功能。

2 優(yōu)化

根據(jù)Vue的異步組件和Webpack的代碼分割功能可以輕松實現(xiàn)組件的懶加載，如：

const Foo = () => import('./Foo.vue')

在區(qū)分開發(fā)環(huán)境與生產(chǎn)環(huán)境時，可以在路由文件夾下分別新建兩個文件： _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') }]
})

這樣組件在開發(fā)環(huán)境下就是非懶加載，生產(chǎn)環(huán)境下就是懶加載的了

以上是“vue如何實現(xiàn)路由根據(jù)開發(fā)狀態(tài)懶加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！