关于VUE首屏加载过长的优化,VUE项目开发优化
阅读正文:
1、 按需引入UI组件
当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例:
(1) 新建一个elementUI.js文件
(2) 访问地址找到按需引入方式的说明
(3) 复制里面的内容到新建的JS文件中,并注释掉不用的组件
(4) 在主文件JS(一般为main.js)中引用elementUI.js文件
2、 异步引入路由组件
路由组件的优化主要是文件引入方式的变化,对于引入后的组件使用是一致的。
Before: import index from '@/components/index' { path: '/ index, name: ‘index’, component: index }
方案一:
After: const index = resolve => require(['@/components/index'], resolve)
const index = resolve => require.ensure([], () => resolve(require('@/components/index')))
两段代码都是将组件分别打包成单个JS文件,在网站加载时会自动解析加载需要的JS文件
方案二(推荐方案):
const index = resolve => require.ensure([], () => resolve(require('@/components/index')), 'indexChunk')
这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载哪个 chunk。虽然分别打包的总体积会变大(同chunk将打包成同一个JS文件),但 是减少了资源请求,从而提升了速度。
3、 请求组件优化:
若使用了Ajax相关的库,比如vue-resource/axios的话,并且只用到了get、post等基础方式传输,可将其移除项目自己重新封装ajax请求对象或在兼容fetch浏览器中使用fetch请求
4、 SSR(Server Side Render/服务端渲染)
后续使用再总结
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp