分析打包

安装 rollup-plugin-visualizer 插件，此插件可以展示构建时长、chunk 数量及大小，是分析构建的绝佳利器。

pnpm add rollup-plugin-visualizer -D

在 vite.config.ts 中引入

import { visualizer } from 'rollup-plugin-visualizer';

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

配置好分析插件后，执行 构建命令，此时在根目录下会生成一个 stats.html 文件，此文件就是当前项目打包的chunk 分析图。

生产环境移除 log

build: {
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
		// 生产环境时移除debugger 默认为true
        drop_debugger: true,
      },
    },
}

CDN导入

借助一个插件vite-plugin-cdn-import  pnpm i vite-plugin-cdn-import -D 

在vite.config.ts中引入

import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
	importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: "https://unpkg.com/vue@next"
        },
        
        {
          name: "element-plus",
          var: 'ElementPlus',
          path: "https://unpkg.com/element-plus",
          css: "https://unpkg.com/element-plus/dist/index.css"
        }
      ]
    })
  ]
})

gzip代码压缩配置

对于gzip代码压缩，有的人说我服务器端压缩了，为啥还要用vite进行gzip打包压缩，这里就涉及到一个知识点，动态压缩和静态压缩，服务器是动态压缩，占用cpu性能，vite等打包好gzip部署后走的静态压缩，服务器压力小，同样用到一个插件 vite-plugin-compression pnpm i vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
	//开启gzip
    viteCompression({
      //生成压缩包gz
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
  ]
})

路由动态导入

路由采用动态引入的方式加载，减小首页 chunk 生成时间，打包的chunk越大耗时也就越多，从大chunk中分离出小chunk可以有效减少打包时间，同时提高首页的加载速度。