在webpack的新特性中支持组件的懒加载,也就是说我们可以在加载到该路由的时候再把这部分脚本进行加载,同时这个在项目进行打包的时候,对应的文件也会被单独打包,对于首屏优化以及其他页面的资源加载优化都是非常好的。这也要求我们在每个页面组件使用组件的时候尽量按需引入,提升体验。
那么我们需要解决的问题是: 0 webpack是静态解析路径的,直接传入变量并不可行 1 每次都写一串加载组件的代码很不方便,是否可以支持写成一个加载组件的方法 2 是否支持区分生产和开发环境,因为开发环境使用懒加载会导致热更新,导致更新变慢,所以开发环境使用全量默认加载,生产环境使用懒加载
1 webpack的路径使用变量拼接,必须预先给出一个相对路径,然后把具体的组件路径在传入 2 用一个箭头函数,将需要传入的组件名或者相对路径传入 3 用process.env.NODE_ENV确定使用哪种加载方式
代码如下: 在原来的router/index.js中,定义一个加载组件的_import方法。
// router/index.js
const _import = require('./_import_' + process.env.NODE_ENV)
//使用时
{
path: '/',
name: 'HelloWorld',
component: _import('HelloWorld')
},
// router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
// router/_import_production.js 如果你加载的vue不是这个路径 请自定义哦
module.exports = file => () => import('@/views/' + file + '.vue')
感谢PanJiaChen的vue-element-admin项目提供的实现思路