博客

由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载。

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

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

在import.development.js中

/**
 * 开发环境
 * ===================
 * 当你的项目页面越来越多之后，在开发环境之中使用 lazy-loading 会变得不太合适，每次更改代码触发热更新都会变得非常的慢。
 * 所以建议只在生产环境之中使用路由懒加载功能。
 * &&这里注意一下该写法只支持 vue-loader at least v13.0.0+
 */
 module.exports = file => require('@/views' + file).default

在mport.production.js 中

/**
 * 生产环境
 * ===========
 * 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
 * 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
 *
 */
module.exports = file => () => import('@/views' + file)

在我们的router主文件里设置

const _import = require('@/utils/util.import.' + process.env.NODE_ENV)

const route = [{
path: '*',
name: '',
component: _import('/dashboard')
}]