vue路由懒加载链接过多导致本地开发热更新慢的解决

解决办法

通过vue-cli来构建的项目正常情况下一般的热更新会在1-10s之间,但是当项目中的路由链接数量达到一定数目的时候我发现热更新的速度大幅增加.甚至长达2-3分钟之久,这就让我坚决不能忍了,随便改点东西就要等如此之久…当然这个跟电脑的CPU是有一定关系的

于是开始着手解决问题,不过查了好久愣是没有什么解决办法,后来在一位大佬的帮助下才解决.顺便利用这次机会记录一下这个过程

首先,在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.js里面修改一下

const _import = require('./_import_' + process.env.NODE_ENV);

export const routers = [
    {
     
        path: '/',
        name: 'home',
        meta: {
      
            title: '主页'
        },
        component: _import('home')
    },
]

这样修改以后在本地开发就不会出现热更新变慢的情况了
基本都在几秒之内

不过这个方法只限于路由都在前端项目里写固定的情况下
如果是动态路由我没有试过,不清楚有没有用