关于VUE首屏加载时间过长的解决方案

举报
且听风吟 发表于 2019/11/03 19:41:50 2019/11/03
【摘要】 1、按需引入UI组件当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例:(1) 新建一个elementUI.js文件(2) 访问地址找到按需引入方式的说明(3) 复制里面的内容到新建的JS文件中,并注释掉不用的组件(4) 在主文件JS(一般为main.js)中引用elementUI.js文件2、异步引入路由组件路由组件的优化主要是文件引入方式的变化,对于引入后的组件使...

1、按需引入UI组件

当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例:
(1) 新建一个elementUI.js文件
(2) 访问地址找到按需引入方式的说明
(3) 复制里面的内容到新建的JS文件中,并注释掉不用的组件
(4) 在主文件JS(一般为main.js)中引用elementUI.js文件

2、异步引入路由组件

路由组件的优化主要是文件引入方式的变化,对于引入后的组件使用是一致的。

常规用法:

image.png

方案一:

image.png

    两段代码都是将组件分别打包成单个JS文件,在网站加载时会自动解析加载需要的JS文件

方案二(推荐方案):

image.png

    这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载哪个 chunk。虽然分别打包的总体积会变大(同chunk将打包成同一个JS文件),但是减少了资源请求,从而提升了速度。

3、请求组件优化:

   若使用了Ajax相关的库,比如vue-resource/axios的话,并且只用到了get、post等基础方式传输,可将其移除项目自己重新封装ajax请求对象或在兼容fetch浏览器中使用fetch请求

4、SSR(Server Side Render/服务端渲染)

后续使用再总结。

本文转载自微信公众号【java学习之道】。

原文链接:https://mp.weixin.qq.com/s?__biz=MzU4NzYwNDAwMg==&mid=2247483857&idx=1&sn=60ce5b3126e264760ee4f84f681ac22d&chksm=fde8c89cca9f418a51cecc9161e004f30e8a2a78e8f013dd86497d5709ed1bb969802d1a7b51&scene=0#rd

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。