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

628 阅读2分钟

  公司现在目前的项目,是我之前通过vue-clic来构建的,当然这个的步骤也是极其简单的,当时这块也是公司准备重做业务,拆分项目里会员的身份为多端项目,作为一个代码的搬运工,理所当然的选择了当下及其火热的Vue框架,还是要感谢一下尤大大给国人小白前端一条不是那么坎坷的道路。

  在构建完成后,我写了一部分的页面,但是由于还要兼顾公司的小程序,公众号方面的业务,就给了另一个前端来接替我现在的工作,由于业务的繁多,也就自然而然的页面繁多,这就导致了路由就百来个(粗略估计),之前那时为了优化, 路由使用的懒加载的方式,造成的结果也可想而知,开发环境下,每改一个东西热更新都要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')

ndex.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左右,极大地提高了工作效率

总结不易,有帮助还希望点个赞😄