web性能优化

一丶 减少资源的打包体积

webpack打包

1. webpack entry多入口分块打包，避免单个文件过大

2. 压缩代码HTML/CSS/JS

• webpack4 现在已经默认使用 uglifyjs-webpack-plugin 对代码做压缩

3. Tree-Sharking 删除冗余代码

• Tree-Shaking 可以在编译的过程中获悉哪些模块并没有真正被使用，这些没用的代码，在最后打包的时候会被去除。

开启 Gzip

• 开启gzip压缩可以有效压缩资源体积，压缩比率在3到10倍左右，可以大大节省服务器的网络带宽，提高资源获取的速度
• 并不是经过gzip压缩之后，所有文件都会变小。
• 根据gzip使用的算法特性，代码相似率越大压缩效率越高

1. webpack的 Gzip 使用compression-webpack-plugin插件

npm install --save-dev compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin')

new CompressionPlugin({
    test: /\.(js|css|ttf|woff|png|eot|svg|jpeg|less|jpg)?$/i,
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    minRatio: 1,
    deleteOriginalAssets: false
})

2. Nginx 开启 gzip

#开启和关闭gzip模式
    gzip on|off;
    
    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length 1k;
    
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 5;
    
    # 进行压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
    
    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on|off
    
    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers 2 4k;

    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;

验证方式：Response Headers 中可以看到 Content-Encoding: gzip

按需加载

1. 路由按需加载-路由懒加载

把不同路由对应的组件分割为不同的代码块，当路由被访问的时候，再加载对应的组件. 减少打包体积

• 生产环境进行路由懒加载
• 开发环境因为热更新慢的原因，不要进行路由懒加载

// 生产环境  _import_production.js
module.exports = file => () => import('@/pages/' + file + '.vue');
// 开发环境 _import_development.js
module.exports = file => require('@/pages/' + file + '.vue').default; // vue-loader at least v13.0.0+
// router.js中引用
const _import = require('./_import_' + process.env.NODE_ENV);
{
    path: 'course',
    component: _import('course/index'),
    name: 'course'
}

2. 组件按需加载

ui库的组件使用按需加载，需要用的组件在一个统一配置文件引入到项目，不要把整个库包引入。减少打包体积

使用CDN资源

第三方库使用cdn链接方式引入，减少打包体积。如vue, vue-router, vuex, element

二丶 代码优化

骨架屏

骨架图：在页面内容未加载完成的时候，先用一些占位图形，待内容加载完之后，再替换掉占位图形

图片处理

1. 使用oss图片

把项目的静态图片传到阿里云oss, oss加载速度比服务器快，且可以加载带oss参数图片

url?preview_resize=x-oss-process=image/resize,w_800,limit_0

2. 图片缩略图方式

生成两张图片缩略图和原图，先加载缩略图，然后加载原图. 解决大图首次加载慢导致白屏久的体验问题

3. 图片懒加载

• 方式一: 监听滚动后offsetTop, 使用data-src 替换 src

• 方式二: 使用 vue-lazyload插件

npm install vue-lazyload --save-dev

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// 在使用图片的地方加上v-lazy即可
<img v-lazy="img.src" >

4. 使用WebP格式图片

WebP 是 Google 团队开发的加快图片加载速度的图片格式，

• 优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且
• 拥有肉眼识别无差异的图像质量，
• 具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

列表懒加载

监听滚动后offsetTop，发送请求加载下一页的数据

资源预加载

1. preload

preload: 页面加载的过程中，在浏览器开始主体渲染之前加载。

<!-- 对sty1e.cs5和 index.js进行pre1oad预加载 -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="index.js" as="script">

2. prefetch

prefetch: 页面加载完成后，利用空闲时间提前加载。

<!--对资源进行 prefetch预加载-->
<link rel="prefetch" href="next.css">
<link rel="prefetch" href="next.js">

icon处理

使用iconfont图标库

减少重排重绘

三种情况导致重新渲染，重新渲染就是重新布局(重排)和重新描绘(重绘)

1. 修改dom
2. 修改样式
3. 用户事件

注意点

1. 使用display:none代替visibility, 因为display:none不会加入渲染树
2. 使用class统一改变样式，少用style单一改样式
3. 多个dom读取操作写在一起，减少dom连续读写操作.

三丶 利用缓存（空间换时间）

浏览器缓存

• 强缓存
• 协商缓存

本地缓存

localStorage，利用localStorage缓存一些公用数据

本地缓存数据不及时更新问题

• 添加一个标识，标记是否要重新拿缓存数据
• 页面每次刷新都要重新检测这个标识，true则清除本地缓存
• 本地缓存是空则重新请求服务器拿缓存的新数据

vuex redux

状态管理

SSR 服务端渲染

• 服务器端拼接html返回到前端