Vue SPA 首屏优化方案
前言
常规vue项目打包后访问，返回一个只包含div的html，其他内容块都是通过js动态生成的。
存在两个比较大的问题：
- 不利于seo
- 首屏加载页慢，用户体验不好
本文是自己根据项目经验总结的方案，如有不足，欢迎指出~
优化
SSR
SSR(Server-SideRendering)即服务端渲染，把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。
使用ssr重新部署构建项目后：
可以看到返回的内容就已经包含了首屏内容的html代码块，perfect!~.~
极速传送门：基于vue-cli4.0+Typescript+SSR的小Demo
按需引入
使用es6module进行按需引入
1.路由文件中按需引入组件
#router.index.ts
exportfunctioncreateRouter(){
returnnewRouter({
mode:'history',
routes:[
{
path:'/',
name:'Home',
component:()=>import(/*webpackChunkName:"Home"*/'./views/Home.vue'),
},
{
path:'/about',
name:'About',
component:()=>import(/*webpackChunkName:"about"*/'./views/About.vue'),
},
],
});
}
2.静态库按需引入模块，而不是全部
如element-ui库中，我只想用button组件：
import{
button
}from'element-ui';
请求优化
1.css、js放置顺序
css文件放header中，js文件放body前，不过vue已经帮我们处理好了~
2.使用字体图标，icon资源使用雪碧图
我们知道http建立一次连接需要3次握手，太多的请求会影响加载速度
对不必要的静态资源我们应该尽量减少，比如页面中的icon图标，如下腾讯官网的一个图片：
直接引入一张完成的图片，根据background-position来设置图片的位置
使用CDN
静态资源都上传到CDN，提高访问速度
不使用CDN：
使用CDN：
可以看到使用CDN后，会对静态文件进行GZIP压缩，下载度度极大的提高
入口chunk优化
拆分入口chunk文件，分离出一些静态的库，既可以加速打包，也可以优化加载。
如下，分离了一些静态库：vuejs、axios、vuex等，可以看到浏览器将开启多个下载线程进行下载。若没有分离这些静态库，入口chunk将十分巨大，加载速度可想而知~.~
分离一个element-ui库，dev环境我们不用管，prod环境下我们才分离，只需要在vue打包配置中移除该库即可：
#vue.config.js
configureWebpack:{
externals:
process.env.NODE_ENV==='production'
?{
'element-ui':'element-ui',
}
:undefined,
},
#index.html手动引入静态资源
以上就是VueSPA首屏优化方案的详细内容，更多关于VueSPA首屏优化的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。