vue3+ts+vite 问题汇总-vite打包分析（5）

1、打包优化过程

1.目前 vite2.x 是基于 rollup 打包的，而不是 esbuild，详见这里2.使用 rollup-plugin-visualizer（类似webpack的插件：webpack-bundle-analyzer） 进行打包分析，打包之后，会在根目录默认生成一个 report.html 文件配置rollup-plugin-visualizer：第一步安装：npm i rollup-plugin-visualizer -D第二步配置：

//vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';
...
+ export default defineConfig(({ mode }: UserConfig): UserConfig => {
+ const lifecycle = process.env.npm_lifecycle_event;
 ......
 plugins: [
      // 打包分析
 +     lifecycle === 'report'
        ? visualizer({ open: true, brotliSize: true, filename: 'report.html' })
        : null
  .......

第三步：修改package.json文件

// package.json
....
scripts:{
+    "report": "rimraf dist && cross-env vite build",
....

第四步：执行命令就可以生产一个report.html文件，点击浏览器打开就可以看到效果

插件：vite-plugin-compression 使用 gzip 或者 brotli 来压缩资源。安装：yarn add vite-plugin-compression -D 或者 npm i vite-plugin-compression -D

配置vite：build.terserOptions 生产环境移除console.log he debugger

//vite.config.ts
build:{
  terserOptions: {
        // 生产环境下移除console
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      }
....