vue项目打包之路由懒加载

虽然前面经过了去除console语句、使用CDN节点的处理，但是部署时打的包还是过大

这绝对无法忍受的

同时，vue 也给出了建议，那就是将打包文件拆分成更小的资源

什么意思呢？

以当前项目为例，首先展示的登录也，事实上，此时没有必要加载其他的组件，如商品、类别、角色用户等组件的代码

但是，因为代码被打包到一个文件中，导致下载这个文件太慢

所以我们的思路时，打包时根据路由将对应的组件分割成不同的代码块，访问对应的路由时再加载对应的代码块（组件），这样，我们的访问就高效了

注意：切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示

1、安装插件

使用方法参考官网 https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/

首先需要安装 babel 的一个插件：babel/plugin-syntax-dynamic-import

npm install --save-dev @babel/plugin-syntax-dynamic-import

2、修改配置文件

在 babel 的配置文件中加入插件

3、修改路由引用

修改 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/Login.vue')

const Home = () => import(/* webpackChunkName: "group-common" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/Welcome.vue')

const Users = () => import(/* webpackChunkName: "group-rights" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Roles.vue')

const Category = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Params.vue')

const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const GoodsAdd = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsAdd.vue')

const Order = () => import('../components/order/Order.vue')
const Report = () => import('../components/reports/Report.vue')

重新编译

 

重新访问登录页面，发现，加载的资源变多了，但是每个模块变小了