移动端真机调试
1. 将手机和电脑处于同一局域网
2. 项目地址使用IP地址
3. 将ip地址生成二维码手机扫码使用 qrcode 生成二维码 或者网址草料网址二维码生成器
上面操作就可以把自己做的项目进行真机测试
移动端打印Vconsole
在移动端也可以打印。东西测试,相当于PC端的console.log()
操作:
1.先找一个vconsole的CDN文件,直接引入就行,或者npm i vconsole
2.然后再main.js里面导入,并使用就可以了
import VConsole from "vconsole";
//在new 的时候必须是开发环境
if (process.env.NODE_ENV === "development") {
new VConsole();
} //现在在页面就可以输入打印了
查看现在是什么环境,是开发环境还是什么环境
console.log(process.env.NODE_ENV);
vue 前端项目优化
待优化项分析
打包项目资源分析
使用现在做主流的框架进行开发,大多都要经历打包这一过程,将核心代码和引入的第三方模块进行打包,但是往往会发现打包的结果不尽人意,在这里使用一个工具可以分析打包文件的构成.
可视化打包分析工具:webpack-bundle-analyzer
1.下载安装
npm install webpack-bundle-analyzer --save-dev
- vue.config.js 配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
...
chainWebpack:(config)={
if(process.env.NODE_ENV === 'production'&&process.env.npm_config_report){
config
.plugin('webpack-bundel-analyze')
.use(BundleAnalyzerPlugin)
.end()
}
}
}
- 配置启动指令 package.josn
{
...
"scripts":{
"report":"npm_config_report= true npm run build "
}
}
- 使用
npm run report
通过该指令在打包的同时开启本地服务器可以浏览文件的构成
5.效果展示
网页运行效率分析
昨天我们介绍了,打包之后分析合并文件的构成模块的分析,通过分析我们可以将部分体积过大的第三方插件压缩或者替换成cdn,来减少包的体积大小,之后将可以将项目上传服务器上。
项目上传到服务器上之后,page性能的好坏,网络请求,图片加载,js代码执行,pwa优化,seo优化等等 这些都是我们前端开发工程师需要关注的问题,
在这里就推荐大家一个工具:lighthouse
Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评估页面,来进行网站优化和完善,提高用户体验
该工具有两种使用方式
- 在chorme开发者工具中使用
a. Lighthouse是直接集成到chrome开发者工具中的,位于‘Audits’面板下。
b. 首先,你得下载安装 了chrome浏览器,相信每个做开发的人员都应该拥有chrome浏览器。
c. 其次,在chrome浏览器中打开你需要测试的网站,按f12进入开发者调试模式,点击‘Audits’选项,
-
通过node集成到自己的项目配置里
a. 全局安装或者项目安装
$ npm install lighthouse -g
b. 对网站进行检测生成分析报告
$ lighthouse https://www.baiud.com --view
这是最基本和用法 其他的配置参数大家可以参考npm:
npm-lighthouse
注:由于版本的原因请使用node v10 以上的版本
以下是对两个网站使用该工具的分析结果.
GZIP 压缩开启
之前我们通过 不同的分析工具分许出项目瓶颈所在,
今天开始一步一步优化项目项目出现的瓶颈,对于网页来说 打包结束之后 的体积也会会影响加载速度,
所以通过gzip压缩的方式来对文件体积进行在一步优化
Gzip压缩作用:将响应报⽂发送⾄客户端之前可以启⽤压缩功能,这能够有效地节约带宽,并提⾼响应⾄客户端的速度。
核心步骤:
- 打包同时产证gzip压缩文件减少服务器压力
- 在服务器(nginx)开启gzip压缩
配置webpack
目的是build 打包的过程中同时产生 gzip压缩文件
在这里通过“compression-webpack-plugin”插件帮助进行压缩
const CompressionPlugin = require('compression-webpack-plugin')
# 插件引入
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
# 需要压缩的文件类型
module.export={
...,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(new CompressionPlugin({
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
}
}
}
打包结果1
打包结果2
修改nginx配置
目录: /etc/nginx/nginx.conf
注 该目录为ubuntu apt 安装nginx目录 其他系统自行寻找
gzip on;
# 开启nginx 压缩功能
gzip_static on;
# 检测本地是否有压缩过的文件
gzip_disable "msie6";
# 禁用gzip条件比如ie6 等低版本浏览器
gzip_vary on;
#选择支持vary header;改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写,表示在传送数据时,给客户端说明我使用了gzip压缩
gzip_proxied any;
gzip_comp_level 6;
# 压缩等级 1-9以此压缩比增大
gzip_buffers 16 8k;
# 设置压缩缓冲区大小,此处设置为16个8K内存作为压缩结果流缓存
gzip_http_version 1.1;
# 压缩版本
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 压缩类型
以下为压缩前后测试文件的加载时间对比
gzip压缩前
gzip压缩后
对比发现压缩效果拔群
尺寸从 477k -> 137k 30% 左右
加载时间 3.96s -> 409ms 9倍左右
用户体验优化
今天我们从用户体验的角度来分析以下如果提高我们的项目,核心反派还是我们经常遇到的首屏白屏问题,
大家可以先观察以下的三种白屏处理方案:
- 骨架屏
- 特效中的王者(菊花)
- 不处理
俗话说的好既要知其然又要知其所以然,我们需要优化首页白屏的问题 ,那么白屏问题如何出现的我们 要分析一波。
这里我们就不得不说 vue react 制造的spa应用的加载渲染过程:
- 下载index.html 解析
- 下载样式文件解析
- 下载js文件解析
- 渲染显示
在这过程中首先是入口的html文件,因为里面只有一个
div 挂载元素 所以整个页面呈现白屏状态,直到vue或者react相关的js文件下载结束并且编译组件挂载到根元素上,这时候白屏结束渲染组件
说到这我们皆可以看出 :
白屏时间= 文件的下载时间 + 组件的解析渲染时间
通过gzip 压缩ssr等其他方式来来优化白屏时间,但是不管总怎么优化这段时间是依然存在的, 于是我们有了另一种优化的思路 “组件没有渲染加载之前我先显示一个过场动画,减少用户等待的焦虑,使得加载过程主观上变得流畅。”,而这也是骨架屏 菊花的实现思路
接下来给大家介绍2中直接注入动画和骨架屏的方式:
明天再给大家介绍通过插件的实现方式
注入加载动画
- 挂载节点注入动画骨架
<div id="app">
#注入的加载动画骨架
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
2.注入动画样式
<style>
.spinner {
margin: 100px auto;
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #FE3C71;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchDelay 1.2s infinite ease-in-out;
animation: stretchDelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
@keyframes stretchDelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
- 效果如下:
注入骨架屏动画
- 挂载节点注入骨架
<div id='app'>
### 在根节点注入骨架屏元素
<div class="timeline-item">
<div class="animated-background">
<div class="background-masker header-top"></div>
<div class="background-masker header-left"></div>
<div class="background-masker header-right"></div>
<div class="background-masker header-bottom"></div>
<div class="background-masker subheader-left"></div>
<div class="background-masker subheader-right"></div>
<div class="background-masker subheader-bottom"></div>
</div>
</div>
</div>
- 注入样式
<style>
.timeline-item {
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
padding: 12px;
margin: 0 auto;
max-width: 472px;
min-height: 200px;
}
@keyframes placeHolderShimmer{
0%{
background-position: -468px 0
}
100%{
background-position: 468px 0
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 40px;
position: relative;
}
.background-masker {
background: #fff;
position: absolute;
}
/* Every thing below this is just positioning */
.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
top: 0;
left: 40px;
right: 0;
height: 10px;
}
.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
top: 10px;
left: 40px;
height: 8px;
width: 10px;
}
.background-masker.header-bottom {
top: 18px;
height: 6px;
}
.background-masker.subheader-left,
.background-masker.subheader-right {
top: 24px;
height: 6px;
}
.background-masker.header-right,
.background-masker.subheader-right {
width: auto;
left: 300px;
right: 0;
}
.background-masker.subheader-right {
left: 230px;
}
.background-masker.subheader-bottom {
top: 30px;
height: 10px;
}
.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
top: 40px;
left: 0;
right: 0;
height: 6px;
}
.background-masker.content-top {
height:20px;
}
.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
width: auto;
left: 380px;
right: 0;
top: 60px;
height: 8px;
}
.background-masker.content-second-line {
top: 68px;
}
.background-masker.content-second-end {
left: 420px;
top: 74px;
}
.background-masker.content-third-line {
top: 82px;
}
.background-masker.content-third-end {
left: 300px;
top: 88px;
}
</style>
- 效果如下: