Vue 项目性能优化 —实战—面试

---

前言

---

本文是自己在实际项目中总结的几点较为实用的Vue的性能优化，希望能对大家实际项目以及面试产生帮助。

一、gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。(需要后端支持)

1. 安装npm i compression-webpack-plugin -D

2. vue.config.js文件里配置

// 导包
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 匹配文件名
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 配置
module.exports = {
   
 configureWebpack: config => {
   
   if (process.env.NODE_ENV === 'production') {
   
     return {
   
       plugins: [
         new CompressionWebpackPlugin({
   
           filename: '[path].gz[query]',
           algorithm: 'gzip',  // 默认为gzip
           test: productionGzipExtensions,
           threshold: 2048, // 对超过2k的数据进行压缩 
           minRatio: 0.8,  // 仅压缩比该比率更好的（minRatio = Compressed Size / Original Size）
           deleteOriginalAssets: false  // 是否删除原文件
         })
       ]
     }
   }
 }
}

3.运行npm run build

gzip压缩后,通过gzip压缩可以使Vue首页加载速度大大提升,以下是压缩前与压缩后

4.添加打包分析可以更具体的查看

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
   
   // 构建体积分析
   chainWebpack: config => {
   
     config