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

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
尽量减少援用大量第三方库 (缩小资源大小)