欢迎来到我的博客小站。  交流请加我微信好友: studyjava。  也欢迎关注公众号:Java学习之道 Fork me on GitHub

关于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/服务端渲染)

后续使用再总结

 




作者:淼淼之森
欢迎任何形式的转载,但请务必注明出处。
如果你觉得本文还可以,那就点击一下推荐,让更多人看到吧!
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。

posted @   淼淼之森  阅读(1551)  评论(0编辑  收藏  举报
编辑推荐:
· .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
  👉转载请注明出处和署名
点击右上角即可分享
微信分享提示