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

前端如今要学的东西不少，共勉！！！