webpack优化系列七：首屏加载优化

前端项目打包之后默认情况下的配置文件较大，部署后首次加载反应较慢，甚至会出现几秒白屏的现象，对于用户的体验感不是很好，所以需要进一步优化一下；
本文主要记录一下本人自己的理解，如果其他方案可评论指导。

瓶颈分析

Network分析

通过network查看资源加载时间

Webpack Bundle分析

通过使用webpack-bundle-analyzer查看文件打包细节

dist包分析

通过dist包查看文件大小

开始优化

体积优化

排查并移除冗余依赖、静态资源

移除项目模板冗余依赖
将public的静态资源移入assets。静态资源应该放在assets下，public只会单纯的复制到dist，应该放置不经webpack处理的文件，比如不兼容webpack的库，需要指定文件名的文件等等

压缩图片

通过使用image-webpack-loader，在构建过程中压缩图片大小
推荐网址：image-webpack-loader

优化SVG图标

引入svg-sprite-loader优化部分冗余的旧SVG图标被打包进去的情况；推荐网址：svg-sprite-loader
svgo-loader压缩体积，推荐网址：svgo-loader

组件按需引入

常用组件实现方式官网基本都有相应文档可参考：
element按需引入官网文档路径：element官网
vant按需引入官网文档路径：vant官网
echarts/highcharts等第三方按需引入

分包策略

通过使用SplitChunksPlugin将chunk-vendor文件拆分
推荐文档：vue打包后生成的chunk-vendors文件过大,利用SplitChunks插件，分离chunk

gzip压缩

Gzip压缩是一种强力压缩手段，针对文本文件时通常能减少2/3的体积。
HTTP协议中用头部字段Accept-Encoding 和 Content-Encoding对「采用何种编码格式传输正文」进行了协定，请求头的Accept-Encoding会列出客户端支持的编码格式。当响应头的 Content-Encoding指定了gzip时，浏览器则会进行对应解压
一般浏览器都支持gzip，所以Accept-Encoding也会自动带上gzip，所以我们需要让资源服务器在Content-Encoding指定gzip，并返回gzip文件
推荐文档：Vue配置compression-webpack-plugin实现Gzip压缩

速度优化

路由懒加载

SPA中一个很重要的提速手段就是路由懒加载，当打开页面时才去加载对应文件，我们利用Vue的异步组件和webpack的代码分割（import()）就可以轻松实现懒加载了。
但当路由过多时，请合理地用webpack的魔法注释对路由进行分组，太多的chunk会影响构建时的速度

{path: 'test',name: 'test',component: () => import(/* webpackChunkName: "user" */ '@/views/user/test'),
}

访问首页的时候发现，居然加载了其他页面的JS。
这里，可以取消webpack的预加载。
这个只是减少首页的请求压力，需不需要使用就仁者见仁智者见智了。
router的懒加载就是必须的了。还是写出来。webpackChunkName是切割出来的js的名称。

module.exports = {chainWebpack: config => {// 移除 prefetch 插件config.plugins.delete('prefetch')},
};

开启HTTP2

HTTP2是HTTP协议的第二个版本，相较于HTTP1 速度更快、延迟更低，功能更多。目前来看兼容性[5]方面也算过得去，在国内有超过50%的覆盖率。
通常浏览器在传输时并发请求数是有限制的，超过限制的请求需要排队，以往我们通过域名分片、资源合并来避开这一限制，而使用HTTP2协议后，其可以在一个TCP连接分帧处理多个请求（多路复用），不受此限制。（其余的头部压缩等等也带来了一定性能提升）
如果网站支持HTTPS，请一并开启HTTP2，成本低收益高，对于请求多的页面提升很大，尤其是在网速不佳时

// Nginx开启HTTP2（>V1.95）
// nginx.conf
listen 443 http2;
// 重启Nginx
nginx -s stop && nginx

Prefetch、Preload

标签的rel属性的两个可选值。 Prefetch，预请求，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。 Preload，预加载，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。

CDN加速

CDN加速原理是把提供的域名作为源站，将源内容缓存到边缘节点。当客户读取数据时，会从最适合的节点（一般来说就近获取）获取缓存文件，以提升下载速度
引入cdn后不用remove 插件，也不用修改package.json，在vue.config.js里面配置忽略打包就行。

module.exports = {configureWebpack: {externals: {'vue': 'Vue','vuex': 'Vuex','vue-router': 'VueRouter','mint-ui': 'MintUI','echarts': 'echarts',}}}

体验优化

白屏时添加loading动画

首屏优化，在JS没解析执行前，让用户能看到Loading动画，减轻等待焦虑。通常会在index.html上写简单的CSS动画，直到Vue挂载后替换挂载节点的内容，但这种做法实测也会出现短暂的白屏，建议手动控制CSS动画关闭

首屏骨架加载

渐进加载图片

一般来说，图片加载有两种方式，一种是自上而下扫描，一种则是原图的模糊展示，然后逐渐/加载完清晰。前者在网速差的时候用户体验较差，后者的渐进/交错式加载则能减轻用户的等待焦虑，带来更好的体验

最后效果

webpack优化系列七：首屏加载优化相关推荐

记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
vue spa php,在Vue中有关SPA首屏加载优化（详细教程）
本篇文章主要介绍了浅谈Vue SPA 首屏加载优化实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧写在前面本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一 ...
单页应用的优缺点，单页应用首屏加载优化、小程序首次启动速度优化
单页应用的优缺点单页应用,简称(Single Page Application)是指整个应用只一个HTML页面,所有的功能和交互都在这个页面完成,利用JavaScript动态改变HTML内容. 优点 ...
接手同事vue项目两个月的血和泪，关于vue项目性能优化，缩短首屏加载时间
最近接手了别人做的vue项目,项目跑起来后,有些页面很卡,首屏加载也慢,打包速度也慢.于是,研究了很久vue的项目性能优化,下面我将从两个部分来详解vue项目的性能优化: 代码优化 webpack打包 ...
web的首屏加载优化
白屏加载和首屏加载时间的区别白屏时间是指浏览器从响应用户输入网址地址,到浏览器开始显示内容的时间. 首屏时间是指浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完 ...
vue项目首屏加载优化
1.将第三方资源使用cdn引入将项目中用到的一些第三方库通过cdn的方式引入的话,在打包的时候就不需要对第三方库进行打包,自然就减小了包的大小,首屏加载的时候所加载的内容也就减少了,加载时间就少了. ...
Vue 首屏加载优化（dist 打包文件从 5M+ 缩减到 324kb）
最近在做 Vue 项目的首屏优化,效果不错,在这里将经验分享给大家,总的优化措施是以下四点. 优化方式1:将项目中用到的图片移动到百度云文件存储优化方式2:使用路由懒加载优化方式3:关闭 sour ...
angular 首屏加载优化_[转]Angular4首页加载慢优化之路
Angular是一个比较完善的前端MVC框架,包含了模板,数据双向绑定,路由,服务,过滤器,依赖注入等等所有的功能.在Web开发前后端流行的今天,我们在某个项目中也尝试使用该框架. 很快按照官网上的例 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...

webpack优化系列七：首屏加载优化

瓶颈分析

Network分析

Webpack Bundle分析

dist包分析

开始优化

体积优化

排查并移除冗余依赖、静态资源

压缩图片

优化SVG图标

组件按需引入

分包策略

gzip压缩

速度优化

路由懒加载

开启HTTP2

Prefetch、Preload

CDN加速

体验优化

白屏时添加loading动画

首屏骨架加载

渐进加载图片

最后效果

webpack优化系列七：首屏加载优化相关推荐

最新文章

热门文章