路由懒加载 在开发环境中导致更新代码时间变长得解决方案

601 阅读1分钟

1.路由懒加载 大项目中的路由懒加载不适用于开发环境(会导致保存代码时热更新代码时间很长20s左右),我们需要配置不同环境下的路由配置,目录如下

在 router/ 文件夹中加入2个文件夹:

_import_development.js

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

_import_production.js

module.exports = file => resolve => require(['@/' + file + '.vue'], resolve)

index.js

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

组件引入时写入:

component: IMPORT('pages/mainPage')  //  组件

这样在开发环境时编译代码时间会大大加快,在生产环境也会使用到懒加载的路由,减小首屏加载的体积,看下效果

18.7s → 4.35s 大概优化了76%的时间。