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

1、按需引入UI组件

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

2、异步引入路由组件

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

常规用法：

方案一：

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

方案二（推荐方案）：

    这段代码将组件分类到名为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