vue项目优化专题

1. 剔出console
npm i terser -D
// vite.config.ts
import { defineConfig } from "vite";  
export default defineConfig({  
    build: {  
        minify: 'terser', // 启用 terser 压缩  
        terserOptions: {  
            compress: {  
                pure_funcs: ['console.log'], // 只删除 console.log 
                //drop_console: true, // 删除所有 console
                drop_debugger: true, // 删除 debugger  
            }  
        }  
    }  
})

2. 图片压缩
npm i vite-plugin-imagemin -D
// vite.config.ts
import viteImagemin from 'vite-plugin-imagemin';
plugin: [
  viteImagemin({
    gifsicle: {
      optimizationLevel: 7, // 设置GIF图片的优化等级为7
      interlaced: false // 不启用交错扫描
    },
    optipng: {
      optimizationLevel: 7 // 设置PNG图片的优化等级为7
    },
    mozjpeg: {
      quality: 20 // 设置JPEG图片的质量为20
    },
    pngquant: {
      quality: [0.8, 0.9], // 设置PNG图片的质量范围为0.8到0.9之间
      speed: 4 // 设置PNG图片的优化速度为4
    },
    svgo: {
      plugins: [
        {
          name: 'removeViewBox' // 启用移除SVG视图框的插件
        },
        {
          name: 'removeEmptyAttrs',
          active: false // 不启用移除空属性的插件
        }
      ]
    }
  })
]

3. gzip 压缩
npm i vite-plugin-compression -D
// vite.config.ts
import compression from 'vite-plugin-compression';
export default defineConfig({
  // 其他配置项...
  plugins: [
    compression({
      algorithm: "gzip", // 指定压缩算法为gzip,[ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: ".gz", // 指定压缩后的文件扩展名为.gz
      threshold: 10240, // 仅对文件大小大于threshold的文件进行压缩，默认为10KB
      deleteOriginFile: false, // 是否删除原始文件，默认为false
      filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // 匹配要压缩的文件的正则表达式，默认为匹配.js、.css、.json、.html、.ico和.svg文件
      compressionOptions: { level: 9 }, // 指定gzip压缩级别，默认为9（最高级别）
      verbose: true, //是否在控制台输出压缩结果
      disable: false, //是否禁用插件
    }),
  ],
});

4. 图片懒加载
npm install vite-plugin-vue-lazyload 
// vite.config.ts
import vue from '@vitejs/plugin-vue'  
import VueLazyload from 'vite-plugin-vue-lazyload'  
  
export default {  
  plugins: [  
    VueLazyload({  
      // 配置选项  
      loading: 'loading.webp', // 默认加载中的占位图  
      error: 'error.webp', // 默认加载错误的占位图  
    }),  
  ],  
};  

<img v-lazy="'image1.jpg'">  

5. 虚拟长列表优化
文档 https://www.npmjs.com/package/vue-virtual-scroller#installation
npm install --save vue-virtual-scroller
// main.js
import Vue from 'vue'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VueVirtualScroller from 'vue-virtual-scroller'
Vue.use(VueVirtualScroller)
或
// vue-virtual-scroller 提供了多个组件：
// RecycleScroller 是一个只渲染列表中可见项的组件。它还会重复使用组件和 dom 元素，以尽可能提高效率和性能。
// DynamicScroller 是一个封装 RecycleScroller 组件的组件，它扩展了 RecycleScroller 的功能，包括动态大小管理。它的主要用例是当你事先不知道项目的大小时。动态滚动器在滚动过程中渲染新项目时会自动 "发现 "项目尺寸。
// DynamicScrollerItem 必须将每个项目封装在 DynamicScroller 中，以处理尺寸计算。
// import { RecycleScroller } from 'vue-virtual-scroller'
// Vue.component('RecycleScroller', RecycleScroller)

<RecycleScroller class="scroller" :items="list"  :item-size="32" key-field="id" v-slot="{item}"><div class="user"> {{ item.name }} </div></RecycleScroller>

6. 缓存组件内部实例
<!-- 非活跃的组件将会被缓存！ -->
<KeepAlive :max="10" include="a,b" >
  <component :is="activeComponent" />
</KeepAlive>

7. 代码分割-
// 代码分割是指构建工具将构建后的 JavaScript 包拆分为多个较小的，可以按需或并行加载的文件。通过适当的代码分割，页面加载时需要的功能可以立即下载，而额外的块只在需要时才加载，从而提高性能。
// lazy.js 及其依赖会被拆分到一个单独的文件中
// 并只在 `loadLazy()` 调用时才加载
function loadLazy() {
  return import('./lazy.js')
}

// 懒加载对于页面初次加载时的优化帮助极大，它帮助应用暂时略过了那些不是立即需要的功能。在 Vue 应用中，这可以与 Vue 的异步组件搭配使用，为组件树创建分离的代码块：
import { defineAsyncComponent } from 'vue'
// 会为 Foo.vue 及其依赖创建单独的一个块
// 它只会按需加载
//（即该异步组件在页面中被渲染时）
const Foo = defineAsyncComponent(() => import('./Foo.vue'))

更新优化
1. Props 稳定性: 将状态比对的逻辑移入父组件来实现, 让传给子组件的 props 尽量保持稳定--优化组件更新
<ListItem v-for="item in list" :id="item.id" :active-id="activeId" />  ==> <ListItem v-for="item in list" :id="item.id" :active="item.id === activeId" />
// 在 <ListItem> 组件中，它使用了 id 和 activeId 两个 props 来确定它是否是当前活跃的那一项。虽然这是可行的，但问题是每当 activeId 更新时，列表中的每一个 <ListItem> 都会跟着更新！
// v-once 是一个内置的指令，可以用来渲染依赖运行时数据但无需再更新的内容。它的整个子树都会在未来的更新中被跳过

2. 减少大型不可变数据的响应性开销
// Vue 的响应性系统默认是深度的。虽然这让状态管理变得更直观，但在数据量巨大时，深度响应性也会导致不小的性能负担，因为每个属性访问都将触发代理的依赖追踪。好在这种性能负担通常只有在处理超大型数组或层级很深的对象时. Vue 确实也为此提供了一种解决方案，通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理。这使得对深层级属性的访问变得更快，但代价是，我们现在必须将所有深层级对象视为不可变的，并且只能通过替换整个根状态来触发更新
const shallowArray = shallowRef([
  /* 巨大的列表，里面包含深层的对象 */
])

// 这不会触发更新...
shallowArray.value.push(newObject)
// 这才会触发更新
shallowArray.value = [...shallowArray.value, newObject]

// 这不会触发更新...
shallowArray.value[0].foo = 1
// 这才会触发更新
shallowArray.value = [
  {
    ...shallowArray.value[0],
    foo: 1
  },
  ...shallowArray.value.slice(1)
]

3. 区分v-if和v-show
// v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

4. v-for与 v-if
(1) Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况
(2) v-for 遍历避免同时使用 v-if
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。vue3中,当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。vue2中, 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。