Vite插件快速识别-性能篇

Vite快速识别之性能篇

1、分包策略：浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。利用这个机制将不会经常更新的代码单独打包，减少 HTTP 请求降低服务器压力。

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

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

2、treeshaking（摇树优化）：保证代码运行结果不变的前提下，去除无用的代码。Vue3默认使用Rollup，必须是ES6 module 模块，所以选择第三方库时尽量使用ESM版本

3、gzip 压缩，减少代码体积，提升网络性能（代码体积不是很大的话不建议使用 ），使用vite-plugin-compression插件实现

npm i vite-plugin-compression

// vite.config.ts
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
  plugins: [viteCompression()]
})

4、cdn 加速：内容分发网络就是从用户最近的服务器请求资源，提升网络请求速度，使用vite-plugin-cdn-import插件实现

npm i vite-plugin-cdn-import -D

// vite.config.ts
import { defineConfig } from 'vite'
import viteCDNPlugin from 'vite-plgin-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`
        }
      ]
    })
  ]
})

5、图片压缩：对图片进行适当压缩使用vite-plugin-imagemin插件实现

npm i vite-plugin-imagemin -D

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
          }
        ]
      }
    })
  ]
})

6、构建分析：npm run build ，构建成功之后会在根目录下生成一个 stats.html ，打开页面即可以看到分析结果，使用rollup-plugin-visualizer 插件实现

npm install rollup-plugin-visualizer -D

// vite.config.ts
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    // 将 visualizer 插件放到最后
    visualizer()
  ]
})