關於vue路由懶載入連結過多時，本地開發熱更新過慢的解決辦法

一個搬磚工發表於2018-07-05
Vue路由

公司現在的管理後臺，是之前我通過vue-cli來構建的，當然，步驟是極其簡單的?，當時也是公司這塊業務準備重新來做，（之前是外包出去的），我身為一個程式碼的搬運工，理所當然的的選擇了當時前端界極其火熱的vue框架，不得不說，尤大還是給了國人小白一條不是坎坷的道路。

在構建完成之後，我寫了一部分的頁面，但由於還要兼顧公司小程式、公眾號方面的業務，就另招了一個前端來接替我現在的工作，公司的管理後臺主要是報表一類的，業務方向是快消品行業，可能一檔活動有至少兩張以上的報表，而且不會是相同的欄位，這就導致路由連結就90多個（粗算了一下），但當時為了優化，路由是懶載入的方式，造成的結果就是每次改一個東西熱更新都要20s左右，

關於vue路由懶載入連結過多時，本地開發熱更新過慢的解決辦法

筆者的電腦是 Mac Pro 13寸的高配，配置相對來說還可以，另一個同事的windows,直接就是80s

之前查了很多資料沒有得到解決，隨後在網上找了一位大牛解決了這個問題（還是有很多厲害的人願意為你解決問題），現在寫到這裡給自己做一個筆記，

在router檔案下面創立兩個js檔案，分別為_import_development.js和_import_production.js,如圖：

關於vue路由懶載入連結過多時，本地開發熱更新過慢的解決辦法

_import_development.js裡面的內容為

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

_import_production.js裡面的內容為

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

index.jsli裡面稍作改造，這邊舉一個例子

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

export const routers = [
    {
        path: '/',
        name: 'login',
        meta: { 
            title: '登入'
        },
        component: _import('login')
    },
]
複製程式碼

這樣當你本地 執行命令 npm run dev的時候，

process.env.NODE_ENV === 'development'
複製程式碼

你可以在config檔案下面的dev.env.js裡面進行設定

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
  BASE_API: '"https://api-dev"'
})
複製程式碼

或者在package.json裡面的scripts選項中書寫命令

"scripts": {
    "build": "cross-env NODE_ENV=production node build/build.js",
  },
複製程式碼

這種方法處理之後，我每次熱更新1-2s左右，極大地提高了工作效率

關於vue路由懶載入連結過多時，本地開發熱更新過慢的解決辦法

前端現在要學的東西很多，共勉！！！

相關文章