构建输出的压缩与优化

构建输出的压缩与优化

Vite.js 在开发模式下利用浏览器原生 ESM 实现快速启动，但生产构建时仍需对输出文件进行压缩优化。合理的构建输出优化能显著提升应用加载性能，减少资源体积。

文件压缩策略

Vite 默认使用 Rollup 进行生产构建，内置了多种压缩工具：

// vite.config.js
export default {
  build: {
    minify: 'terser', // 可选 'terser' 或 'esbuild'
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
}

ESBuild 压缩速度比 Terser 快 20-40 倍，但压缩率略低。对于需要极致压缩的场景：

{
  build: {
    minify: 'terser',
    target: 'es2015',
    cssTarget: 'chrome80'
  }
}

CSS 代码优化

Vite 对 CSS 的处理包含自动压缩和代码分割：

/* 原始CSS */
.container {
  margin: 10px 20px 10px 20px;
  display: flex;
  flex-direction: column;
}

构建后会被压缩为：

.container{margin:10px 20px;display:flex;flex-direction:column}

通过配置实现更高级的 CSS 处理：

{
  css: {
    postcss: {
      plugins: [
        require('postcss-combine-duplicated-selectors')(),
        require('postcss-sort-media-queries')()
      ]
    }
  }
}

资源内联与外部化

小资源内联可减少 HTTP 请求：

<!-- 构建前 -->
<img src="./assets/icon.svg" />

<!-- 构建后 -->
<img src="data:image/svg+xml;base64,PHN2Zy..." />

配置阈值控制内联行为：

{
  build: {
    assetsInlineLimit: 4096 // 4KB以下资源自动内联
  }
}

相反，大资源应外部化：

{
  build: {
    rollupOptions: {
      external: ['lodash-es']
    }
  }
}

代码分割策略

动态导入自动触发代码分割：

// 原始代码
const module = await import('./module.js')

// 构建后生成单独chunk
src_module_js.js

手动配置分割规则：

{
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
}

Tree Shaking 深度优化

基于 ESM 的静态分析实现 dead code 消除：

// utils.js
export function used() {...}
export function unused() {...}

// main.js
import { used } from './utils'

构建后 unused 函数会被移除。对于第三方库需确保 ESM 版本：

{
  resolve: {
    mainFields: ['module', 'jsnext:main', 'main']
  }
}

预渲染关键资源

使用 @vitejs/plugin-legacy 生成现代和传统双版本：

import legacy from '@vitejs/plugin-legacy'

{
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

构建产物分析

使用 rollup-plugin-visualizer 分析输出：

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

{
  plugins: [
    visualizer({
      open: true,
      gzipSize: true
    })
  ]
}

生成的可视化报告显示各模块体积占比，帮助定位优化点。

缓存策略优化

基于内容哈希生成文件名：

{
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].[hash].js`,
        chunkFileNames: `[name].[hash].js`,
        assetFileNames: `[name].[hash].[ext]`
      }
    }
  }
}

输出示例：

assets/index.3a7b2c4d.js
assets/vendor.e5f6g7h8.css

现代浏览器优化

针对现代浏览器输出更简洁的代码：

{
  build: {
    target: 'esnext',
    polyfillModulePreload: false
  }
}

配合 module 类型 script 标签：

<script type="module" src="/assets/index.es.js"></script>

服务端渲染优化

SSR 构建需要特殊处理：

{
  build: {
    ssr: true,
    rollupOptions: {
      input: 'src/entry-server.js'
    }
  }
}

客户端构建标记 SSR 所需模块：

{
  ssr: {
    noExternal: ['react', 'react-dom']
  }
}

性能监控集成

构建时注入性能标记：

import { defineConfig } from 'vite'
import { injectSpeedMeasure } from 'vite-plugin-speed-measure'

export default injectSpeedMeasure(
  defineConfig({
    // 常规配置
  })
)

输出构建各阶段耗时报告：

✓ built in 1.25s
• plugins vite:css - 320ms
• plugins vite:esbuild - 450ms
• plugins rollup - 480ms