前端性能优化（vite）

vite相对于webpack使用rollup构建，更快

分包策略

默认情况下，浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。我们可以将不经常更新的代码单独打包成一个js文件，减少http请求，降低服务器压力。

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: id {
          // 将 node_modules 中的代码单独打包成一个 JS 文件
          if(id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

gzip压缩

gzip 是一种使用非常普遍的压缩格式。使用 gzip 压缩可以大幅减小代码体积，提升网络性能。开启 gzip 也比较简单，使用一个插件就可以了

npm i vite-plugin-compression

// vite.config.js
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

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

完整逻辑是，我们需要把浏览器支持的压缩类型传给服务端，在请求头中设置 accept-encoding: gzip, deflate, br，只不过这一步浏览器通常帮我们都做了。然后服务端根据浏览器支持的类型，设置响应头 content-encoding: gzip ，告诉浏览器以何种方式进行解压。

注意：因为浏览器解压也需要时间，所以代码体积不是很大的话不建议使用 gzip 压缩。

cdn加速

内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。通常我们请求依赖模块使用 CDN ，而请求项目代码依然使用自己的服务器。

使用 CDN 也比较简单，一个插件就可以搞定：

npm i vite-plugin-cdn-import -D

// vite.config.js
import { defineConfig } from 'vite'
import viteCDNPlugin from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    viteCDNPlugin({
      // 需要 CDN 加速的模块
      modules: [
        {
          name: 'lodash',
          var: '_',
          path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
        }
      ]
    })
  ]
})

图片压缩

根据项目对清晰度的要求，我们可以使用 vite-plugin-imagemin 插件，对图片进行适当压缩：

npm i vite-plugin-imagemin -D

// vite.config.js
import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false
      },
      optipng: {
        optimizationLevel: 7
      },
      mozjpeg: {
        quality: 20
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox'
          },
          {
            name: 'removeEmptyAttrs',
            active: false
          }
        ]
      }
    })
  ]
})

不同格式的文件配置也不一样，具体可以参考 github ：vite-plugin-imagemin 。