技術標籤：Vue學習vue.jshtml5

這裡就想記錄一下關於解決路由懶載入熱更新慢的問題。

我們知道使用路由懶載入可以優化我們系統的載入速度，但是在使用懶載入的時候在我們開發環境下會導致Webpack熱更新慢的問題，致使我們執行專案會很漫長。（當然如果是通過Vue3的Vite的話，它是不用webpack的所以這裡也不列舉進來）

那麼我們就可以進行設定，在我們開發環境下就不用懶載入，在我們生產環境下就用懶載入就可以了。

我們可以在路由設定的資料夾裡增加一個開發環境路由配置和生產 環境路由配置。

我們設定了增加了一個import_development配置和import_production檔案。在這兩個檔案裡我們分別設定路由的按需載入（通過函式）和直接引用

在import_development.js中

module.exports = file => require('@/views/' + file + '.vue').default

在import_production.js中

module.exports = file => () => import('@/views/' + file + '.vue')

其中@/views是我們放置單檔案vue介面的資料夾，@定義到當前專案的src目錄

在我們的router主檔案裡設定

const _import = require('./import_'+process.env.NODE_ENV)
 

const route = [{
  path: '*',
  name: '',
  component: _import('common/Index')
}]