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

公司如今的管理後臺，是以前我經過vue-cli來構建的，固然，步驟是極其簡單的😆，當時也是公司這塊業務準備從新來作，（以前是外包出去的），我身爲一個代碼的搬運工，理所固然的的選擇了當時前端界極其火熱的vue框架，不得不說，尤大仍是給了國人小白一條不是坎坷的道路。

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

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

以前查了不少資料沒有獲得解決，隨後在網上找了一位大牛解決了這個問題（仍是有不少厲害的人願意爲你解決問題），如今寫到這裏給本身作一個筆記，

在router文件下面創立兩個js文件，分別爲_import_development.js和_import_production.js,如圖：

_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左右，極大地提升了工做效率

前端如今要學的東西不少，共勉！！！