vue项目性能速度优化

1.打包的时候去掉map文件，缩小打包后的文件大小，提高编译速度

config/index.js中productionSourceMap: true,修改为false

2.取消js，css的预加载，在首次加载项目时不去加载页面的js，css文件

module.exports = {
        //取消打包文件dist里面的.map文件 
          productionSourceMap: process.env.NODE_ENV === 'development' ? true : false,
  
        //取消引入css 的rel='preload'属性 取消文件的预加载  适用于引入文件较多的项目
          chainWebpack: config => {
            config.plugins.delete("prefetch") //取消预加载
          },
  }

3.使用gzip压缩打包后的文件

vue使用 nginx gzip需要配合nginx服务器端配置。在nginx.conf里具体配置如下：

gzip on; 开启或关闭gzip on off
gzip_buffers 32 4k;
gzip_comp_level 5; 压缩等级，字数越大压缩越好，时间也长
gzip_static on; 表示使用已经压缩好的gz文件，根据请求 配合vue生成的gz文件
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

vue在项目中安装插件（npm与cnpm均可）

npm install compression-webpack-plugin@6.1.1

在vue配置文件加入如下配置

//首先引入插件
const CompressionWebpackPlugin = require('compression-webpack-plugin'); //引入插件
const productionGzipExtensions = ["js", "css", "json"]; //要压缩的文件类型

//初始化插件配置
module.exports={
  configureWebpack: {
    plugins: [
      new CompressionWebpackPlugin({
        filename: '[path][base].gz',
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //是否删除源文件
      })
    ]
  },
}

配置后使用命令 npm run build打包即可

4.路由懒加载

设置路由懒加载，按需加载会加速首屏渲染。但是进行懒加载之后，实现按需加载，那么项目打包不会把所有js打包进app.[hash].js里面，优点是可以减少app.[hash].js体积，缺点就是会把其它js分开打包，造成多个js文件，会有多次https请求。如果项目比较大，需要注意懒加载的效果。

配置样例如下：

import Vue from 'vue'
import Router from 'vue-router'

import api from "./api/index";
// views..
const mall = resolve => require(["./mall"], resolve)
const mallList = resolve => require(['./views/mallList'], resolve)
const goodDetail = resolve => require(['./views/goodDetail'], resolve)
const payStatus = resolve => require(['./views/payStatus'], resolve)......

5.v-if与v-show指令的使用

v-if是懒加载，true时会进行渲染，false时不会渲染占用空间

v-show 是无论状态是 true 或者是 false，都会进行渲染，并对布局占据空间对于在项目中，需要频繁调用，不需要权限的显示隐藏，可以选择使用 v-show，可以减少系统的切换开销。