vite性能优化

---

一、分包策略

1）浏览器的缓存策略：

• 访问网站时向服务器获取静态资源并缓存起来，如css、js等

• 下次再访问时，如果之前保存的 “静态资源” 名字没有改变，则不会重新请求

2）vite打包文件生成策略：

• 打包时只要代码内容变了，就会生成hash字符完全不同的新文件

3）vite分包策略：

• 我们的业务代码时常改变，而依赖不会变化

• 所以把依赖分开打包，以避免多次重新请求资源

配置 Rollup 实现

在vite的配置文件中添加 “build.rollupOptions.output.manualChunks” 配置项实现，如：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 每个 '键' 都表示一个分包块，'值' 包含列出的模块及其所有依赖项
          vue: ['vue', 'vue-router', 'pinia', 'axios'],
          editor: ['mavon-editor', '@kangc/v-md-editor']
        },
      },
    },
  },

})

详细可见文档：Rollup 选项文档

二、gzip压缩

• 把打包后的静态资源压缩成 gzip格式
• 服务器响应资源文件时发送 gzip格式文件
• 浏览器拿到 gzip文件 后再解压使用
• 文件比较小不建议用 gzip ，因为浏览器解压时间可能大于请求原来资源的时间

配置插件实现

通过配置 vite 插件 “vite-plugin-compression” 实现：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from "vite-plugin-compression";          // 配置 gzip 压缩

export default defineConfig({
  plugins: [
    vue()，
    viteCompression()
  ],
})

详细可见：vite-plugin-compression

三、cdn加速

1）cdn: content delivery network （内容分发网络）

2）我们项目的所有依赖以及文件在我们进行打包以后会放到我们的服务器上面去

• 我们把第三方模块写成 cdn 的形式
• 保证我们自己代码的一个小体积，降低我们自己服务器的传输压力
• 第三方代码通过 cdn 向最近最优的服务器请求过来

配置插件实现

• cdn 链接获取地址：JSDELIVR
• 通过配置 vite 插件 “vite-plugin-cdn-import” 实现：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {Plugin as importToCDN} from 'vite-plugin-cdn-import'    // 配置 cdn 加速

export default defineConfig({
  plugins: [
    vue(),
    importToCDN({
      modules: [{
        // 需要 CDN 加速的包名称
        name: 'lodash',        
        // 全局分配给模块的变量，Rollup 需要这个变量名称	
        var: 'lodash',         
        // 指定 CDN 上的加载路径
        path: `https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js`,      
      },]
    })
  ],

})

详细可见：vite-plugin-cdn-import

---

提示：文章到此结束，文章为个人学习记录，侵删。