三个层面：网络请求，JS优化，CSS优化

  • 减少http请求
  • 图片懒加载
  • 使用字体图标或svg，尽量不使用png，png尽量使用css图片精灵
  • 避免使用闭包，减少DOM回流重绘，避免使用css表达式
  • 不使用cookie，不使用iframe，不使用flash
  • 尽量减少引用大量第三方库 (减少资源大小)
  • 使用webpack插件压缩混淆去注释 (减少资源大小)
  • 开启Gzip压缩 (减少请求资源大小)
  • vue可以使用路由懒加载 (避免一次性加载资源过多)

0. 路由懒加载

路由组件不使用直接引入，而是匿名函数返回形式，如下注释可以定义编译后的js文件名，在未进入该路由时此js文件的内容将不会被请求到：

1
2
3
4
{
    path: '/home',
    component: () => import(/* webpackChunkName: 'base' */ '@/views/Index.vue')
}

1. 开启gzip压缩

1.1. 需要服务端做配置开启gzip功能，例如我的是nginx.conf配置：

1
2
3
4
5
gzip on;
gzip_min_length 80k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

1.2. vue.config.js配置编译gzip，npm安装相关插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      );
    }
  },
}

2. 使用插件压缩混淆去注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new TerserPlugin({
          cache: true,
          parallel: true,
          sourceMap: false,
          terserOptions: {
            compress: {
              drop_console: true,
              drop_debugger: true
            }
          }
        })
      );
    }
  },
}

3. 去掉多余的第三方库

3.1. 删除库npm指令：npm uninstall xxx

3.2. 把非必要库放到服务端，如处理时间常用库moment.js，引入比较大，建议放在后端，或者使用代替方案如day.js，有时间精力也可以自行封装方法，但是重复造车轮不推荐。

3.3. (可选)提取第三方库，不使用import方式引入，而是使用其cdn链接直接在public中的index.html中使用传统方式引入，有利于减少编译包体积。

4. 资源CDN

资源文件CDN，像图片资源我都是放在七牛云储存，从不放服务器，七牛云好像配置域名就可以cdn加速了，比较方便。如果客户端有特殊自定义需要，如全国地址要自行配置，其配置文件也比较大，也要提取出来，不要放客户端中打包。

5. 图片预加载

防止多图或图片较大时对客户端浏览体验产生影响：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export default class PreLoad {
    private i: number;
    private arr: string[];
    constructor(arr: string[]) {
        this.i = 0
        this.arr = arr
    }
    public imgs() {
        return new Promise(resolve => {
            const work = (src: string) => {
                if (this.i < this.arr.length) {
                    const img = new Image()
                    img.src = src;
                    if (img.complete) {
                        work(this.arr[this.i++])
                    } else {
                        img.onload = () => {
                            work(this.arr[this.i++])
                            img.onload = null;
                        };
                    }
                    // console.log(((this.i + 1) / this.arr.length) * 100);
                } else {
                    resolve()
                }
            }
            work(this.arr[this.i])
        })
    }
}

加个转圈菊花或者加载动画/提示等，然后调用该方法来阻塞页面：

1
2
3
const imgs = ['http://XX.png','http://XX.png']
const preload = new this.$utils.preload(imgs)
const preDone = await preload.imgs()