关于vue路由懒加载链接过多时,本地开发热更新过慢的解决办法

4,201 阅读2分钟

公司现在的管理后台,是之前我通过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左右,极大地提高了工作效率

前端现在要学的东西很多,共勉!!!