web性能优化

一 减小资源（静态资源，后端加载的数据）大小

压缩代码HTML/CSS/JS

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

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

图片处理

把项目的静态图片都传到阿里云oss, oss加载速度比服务器快

icon处理

使用iconfont图标库

二 避免同一时间的过多次数请求

骨架屏

page-skeleton-webpack-plugin是一个用来生成骨架屏的webpack插件

const SkeletonPlugin = require('page-skeleton-webpack-plugin').SkeletonPlugin

new SkeletonPlugin({
  pathname: path.resolve(__dirname, './shell'), // pathname为来存储 shell 文件的地址
  staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
  routes: ['/', '/about'], // 将需要生成骨架屏的路由添加到数组中
  port: '7890'
}

路由懒加载-按需加载

把不同路由对应的组件分割为不同的代码块，当路由被访问的时候，再加载对应的组件

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

// 生产环境  _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'
}

图片懒加载

1. 监听滚动后offsetTop, 使用data-src 替换 src

2. 使用 vue-lazyload插件

npm install vue-lazyload --save-dev

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// 在使用图片的地方加上v-lazy即可

列表懒加载

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

资源预加载

1. preload

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

2. prefetch

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

代码分包分块加载（webpack）

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

使用CDN资源

• 把vue, vue-router, vuex, element使用cdn链接加载

浏览器缓存

• 强缓存
• 协商缓存

本地缓存 localStorage

SSR 服务端渲染

解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题。