欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目打包之路由懒加载

程序员文章站 2024-02-07 22:57:28
...

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

vue项目打包之路由懒加载

这绝对无法忍受的

同时,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 的配置文件中加入插件

vue项目打包之路由懒加载

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')

重新编译

vue项目打包之路由懒加载

 

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

vue项目打包之路由懒加载