vue-router根据环境改变动态加载组件

阅读 410
收藏
2018-05-29
原文链接:damobing.com

背景

在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项目提供的实现思路

评论