Vue项目里的性能优化

站长

2023年06月16日 16:47 · 阅读数 50

在做项目时，经常会遇到打开首页白屏且加载时间过长的问题，查看页面资源加载情况后定位其原因，一般是webpack打包后的js和css文件过大，从而导致浏览器加载和渲染的时间变长。

综合网上的一些案例和解决方案，整理了下Vue+webpack项目首屏页面加载太慢的原因可能有以下几个：

打包文件过大

对打包文件进行压缩、分割、按需加载等处理，压缩webpack打包后的文件，提高首屏加载速度。

优化方案：

使用Gzip压缩文件体积：使用 webpack 的一些插件和配置，例如 CompressionPlugin、TerserPlugin、optimization.minimize 等，可以压缩打包文件的体积，提高加载速度。

执行命令：

    npm i compression-webpack-plugin -D

vue.config.js

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {  
    configureWebpack: () => {    
        if (process.env.NODE_ENV === 'production') {      
            return {        
                plugins: [          
                    new CompressionPlugin({             
                        filename: '[path][base].gz',
                        algorithm: 'gzip',
                        test: /.js$|.html$|.css$|.jpg$|.jpeg$|.png/, // 需要压缩的文件类型            
                        threshold: 10240, // 归档需要进行压缩的文件大小最小值，这个是10K以上的进行压缩            
                        deleteOriginalAssets: false, // 是否删除原文件            minRatio: 0.8         
                      })      
              ]     
            }   
        } 
    } 
}
// [这样，打包后的文件会生成对应的 .gz 文件，可以减小 60% 以上的体积]

分割代码块：使用 webpack 的一些插件和配置，例如 SplitChunksPlugin、optimization.splitChunks 等，可以分割代码块，实现公共模块的复用，减少重复代码的打包。

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
      vendors: {
        test: /[\/]node_modules[\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

网络请求过多

对网络请求进行优化，例如使用缓存、预加载、懒加载等技术，减少网络请求，增加首屏加载时间。

优化方案：

axios 的 cancelToken：取消不必要的请求，避免浪费资源
拦截器或者节流函数 ：控制请求的频率，防止重复提交或者无效请求。
缓存机制：将一些不经常变化的数据存储在本地，减少对服务器的请求。
按需加载组件：使用 Vue 的异步组件和 webpack 的动态 import 语法，可以实现按需加载组件，只有当组件需要渲染时才会加载对应的文件。
使用 CDN 资源：可以将静态资源部署到离用户最近的 CDN 节点上，减少网络延迟和距离，提高访问速度，同时也可以减少打包文件的体积。
开启 GZIP 压缩：开启 GZIP 压缩可以减少传输的数据量，提高网络传输效率
使用骨架屏或 loading 动画：使用骨架屏或 loading 动画可以提升用户的等待体验，减少用户的焦虑感

Vue 代码层面的优化

区分 v-if 和 v-show 的使用场景，v-if 是条件渲染，只有在条件为真时才会渲染组件，适合切换频率较低的场景；v-show 是条件显示，无论条件为真或假都会渲染组件，只是通过 CSS 控制显示或隐藏，适合切换频率较高的场景。
区分 computed 和 watch 的使用场景，computed 是计算属性，可以根据依赖的数据动态计算结果，并且具有缓存性能，适合用于计算结果需要被多次使用的场景；watch 是侦听器，可以监听数据的变化，并执行相应的回调函数，适合用于数据变化需要触发异步或开销较大的操作的场景。
为 v-for 遍历添加 key 属性，key 属性可以帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素，提高渲染性能。另外，避免在 v-for 中使用 v-if，因为这会导致不必要的性能损耗。
使用 keep-alive 缓存组件，keep-alive 可以缓存不活动的组件实例，避免反复创建和销毁组件，提高页面响应速度。可以通过 include 和 exclude 属性来控制哪些组件需要被缓存。
使用路由懒加载和代码分割，路由懒加载可以实现按需加载组件，避免一次性加载所有路由资源造成页面卡顿；代码分割可以将代码按照一定的规则分割成不同的块，实现按需加载和并行加载，提高加载效率。

以上是我对 Vue+webpack 项目首屏优化的一些理解，具体可以参考以下这些文章，了解更多的细节和示例：

Vue首屏加载速度优化，提升80%以上，这篇文章介绍了按需加载组件的方法，并给出了具体的代码示例和效果对比。
[webpack]首屏加载优化的实践，这篇文章介绍了使用 CDN 资源的方法，并给出了具体的 webpack 配置和效果对比。
Vue最全性能优化方法，这篇文章介绍了使用骨架屏或 loading 动画的方法，并给出了具体的代码示例和效果展示。
webpack SplitChunksPlugin vue-cli 4 拆包实战 - 简书

转载自:https://juejin.cn/post/7244077531608006715