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

前端现在要学的东西很多，共勉！！！