乐趣区

关于前端:vue项目前端性能优化总结

jiezi

0. 路由懒加载

路由组件不应用间接引入，而是匿名函数返回模式，如下正文能够定义编译后的 js 文件名，在未进入该路由时此 js 文件的内容将不会被申请到：

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

1. 开启 gzip 压缩

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

    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 装置相干插件：

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. 应用插件压缩混同去正文 

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 减速了，比拟不便。如果客户端有非凡自定义须要，如全国地址要自行配置，其配置文件也比拟大，也要提取进去，不要放客户端中打包。

configureWebpack: config => {if (isProduction) {
      config.plugins.push(
      .....
      // 拆散包
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios'
      }
    }
  },

5. 图片预加载

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

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])
        })
    }
}

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

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

题外

1. 常见前端优化的三个层面：网络申请，JS 优化，CSS 优化

  • 缩小 http 申请
  • 图片懒加载
  • 应用字体图标或 svg，尽量不应用 png，png 尽量应用 css 图片精灵
  • 防止应用闭包，缩小 DOM 回流重绘，防止应用 css 表达式
  • 不应用 cookie，不应用 iframe，不应用 flash
  • 尽量减少援用大量第三方库 (缩小资源大小)

2. 在新版的 vue-cli 工具中 GUI 界面有集成了不错的剖析工具，能够直观的看到我的项目的编译文件大小状况，对此针对性的剖析改良代码也是重要的优化伎俩。

退出移动版