Vue + ElementUI的电商管理系统实例27 项目优化-实现路由懒加载
2023-09-27 14:24:39 时间
项目优化策略
8、路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
具体需要三步:
1)安装 @babel/plugin-syntax-dynamic-import 包
打开可视化UI面板,在依赖项中,点击添加依赖-开发依赖,搜索 @babel/plugin-syntax-dynamic-import ,进行安装。
安装完成后,进行配置到项目
2)在 babel.config.js 排至文件中声明该插件。
打开 babel.config.js 文件:
// 这是项目发布阶段需要用到的 babel 插件 const prodPlugins = [] if (process.env.NOOD_ENV === 'production') { prodPlugins.push('transform-remove-console') } module.exports = { 'presets': [ '@vue/cli-plugin-babel/preset' ], 'plugins': [ [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' } ], // 'transform-remove-console' // 发布产品时候的插件数组 ...prodPlugins, // 路由懒加载 '@babel/plugin-syntax-dynamic-import' ] }
3)将路由改为按需加载的形式,实例代码如下:
const Foo = () => import(/* webpackChunkName: 'group-foo' */ './Foo.vue') const Bar = () => import(/* webpackChunkName: 'group-foo' */ './Bar.vue') const Baz = () => import(/* webpackChunkName: 'group-boo' */ './Baz.vue')
webpackChunkName 是:实现组件的分组。
关于路由懒加载的详细文档,可参考如下连接:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
打开 router/index.js 文件:
// import Login from '../components/Login.vue' const Login = () => import(/* webpackChunkName: 'login_home_welcome' */ '../components/Login.vue') // import Home from '../components/Home.vue' const Home = () => import(/* webpackChunkName: 'login_home_welcome' */ '../components/Home.vue') // import Welcome from '../components/Welcome.vue' const Welcome = () => import(/* webpackChunkName: 'login_home_welcome' */ '../components/Welcome.vue') // import Users from '../components/user/Users.vue' const Users = () => import(/* webpackChunkName: 'users_rights_roles' */ '../components/user/Users.vue') // import Rights from '../components/power/rights.vue' const Rights = () => import(/* webpackChunkName: 'users_rights_roles' */ '../components/power/rights.vue') // import Roles from '../components/power/roles.vue' const Roles = () => import(/* webpackChunkName: 'users_rights_roles' */ '../components/power/roles.vue') // import Cate from '../components/goods/Cate.vue' const Cate = () => import(/* webpackChunkName: 'cate_params' */ '../components/goods/Cate.vue') // import Params from '../components/goods/Params.vue' const Params = () => import(/* webpackChunkName: 'cate_params' */ '../components/goods/Params.vue') // import List from '../components/goods/List.vue' const List = () => import(/* webpackChunkName: 'list_add' */ '../components/goods/List.vue') // import Add from '../components/goods/Add.vue' const Add = () => import(/* webpackChunkName: 'list_add' */ '../components/goods/Add.vue') // import Order from '../components/order/Order.vue' const Order = () => import(/* webpackChunkName: 'order_report' */ '../components/order/Order.vue') // import Report from '../components/report/Report.vue' const Report = () => import(/* webpackChunkName: 'order_report' */ '../components/report/Report.vue')
保存后,重新回到可视化UI面板,在 build 中重新运行,编辑成功后可以看到:
可以看到资源列表的 app.js 和 chunk-vendors.js 都变小了。
相关文章
- 08Vue - Vue实例(实例生命周期)
- 06Vue - Vue实例(构造器)
- Vue - 满意度调查评价功能,表情图片打分评分组件(非星星评分组件,类似抖音商品满意度好评、中评、差评评价功能)代码干净整洁注释详细无 BUG,无任何第三方插件依赖,完整功能实例源码插件
- [转]vue 预览pdf,txt
- vue dayjs in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js
- vue-element-admin完整项目实例
- vue-cli3.0多环境配置和本地跨域
- 基于vue-cli,sass,vant的移动端项目
- VUE-016-CSS 控制 div 层级显示为最顶层,CSS层级样式控制实例
- vue-cli 中使用less
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- Vue+Echarts监控大屏实例一:软件系统运行监控模板实例
- vue实战入门进阶篇三:vue+elementui实现网站后台-系统框架搭建
- 【vue create】一.使用vue creat搭建项目
- vue购物车组件设计结构
- 前端技术:vue(Vue项目中-axios设置默认请求地址和请求头)
- Vue学习第30天——router-link的push和replace属性
- Vue开发实例(16)之创建标签页
- Vue开发实例(14)之Vue状态管理store
- Vue开发实例(10)之Link 文字链接
- Vue经典实例之走马灯
- Vue经典实例之可编辑的表格table(史上最简单方便的处理方式,比用element容易理解),同时处理input获取焦点的问题!不好用你找我
- Vue.js 技术揭秘学习 (2) Vue 实例挂载的实现