解决Vue路由懒加载Webpack热更新慢的问题

https://blog.csdn.net/Deku_Ln/article/details/111863980

这里就想记录一下关于解决路由懒加载热更新慢的问题。

我们知道使用路由懒加载可以优化我们系统的加载速度，但是在使用懒加载的时候在我们开发环境下会导致Webpack热更新慢的问题，致使我们运行项目会很漫长。（当然如果是通过Vue3的Vite的话，它是不用webpack的所以这里也不列举进来）

那么我们就可以进行设置，在我们开发环境下就不用懒加载，在我们生产环境下就用懒加载就可以了。

我们可以在路由设置的文件夹里增加一个开发环境路由配置和生产 环境路由配置。

我们设置了增加了一个import_development配置和import_production文件。在这两个文件里我们分别设置路由的按需加载（通过函数）和直接引用

在import_development.js中

module.exports = file => require('@/views/' + file + '.vue').default

在import_production.js中

module.exports = file => () => import('@/views/' + file + '.vue')

其中@/views是我们放置单文件vue界面的文件夹，@定义到当前项目的src目录

在我们的router主文件里设置

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

const route = [{

path: '*',

name: '',

component: _import('common/Index')

}]