输出生成阶段的控制

输出生成阶段的控制

Vite.js 在开发和生产环境中采用了不同的策略处理资源输出。开发模式下依赖浏览器原生 ESM 实现按需编译，而生产构建则通过 Rollup 进行全量打包。这种差异化的处理机制使得输出控制成为项目优化的关键环节。

基础配置方法

通过 vite.config.js 可以定义基本的输出行为：

// vite.config.js
export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    emptyOutDir: true
  }
})

• outDir 指定输出目录（默认 dist）
• assetsDir 设置静态资源子目录（默认 assets）
• emptyOutDir 控制是否清空输出目录

文件哈希与缓存策略

生产环境构建默认会对资源文件添加哈希后缀：

build: {
  rollupOptions: {
    output: {
      assetFileNames: 'static/[name]-[hash].[ext]',
      chunkFileNames: 'static/[name]-[hash].js',
      entryFileNames: 'static/[name]-[hash].js'
    }
  }
}

可通过 build.manifest 生成资源映射表：

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

多页面应用输出控制

对于多入口项目需要特殊配置：

build: {
  rollupOptions: {
    input: {
      main: resolve(__dirname, 'index.html'),
      admin: resolve(__dirname, 'admin.html')
    }
  }
}

自定义输出格式

通过 Rollup 插件可以修改输出结构：

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: 'public/robots.txt', dest: './' }
      ]
    })
  ]
})

环境变量注入

动态控制输出内容：

// .env.production
VITE_API_BASE=https://api.example.com

// 组件中使用
const apiBase = import.meta.env.VITE_API_BASE

代码分割优化

精细控制 chunk 分割策略：

build: {
  chunkSizeWarningLimit: 1000,
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('lodash')) {
          return 'lodash'
        }
        if (id.includes('chart.js')) {
          return 'charts'
        }
      }
    }
  }
}

资源内联处理

对小文件采用内联策略减少请求：

build: {
  assetsInlineLimit: 4096 // 4KB以下文件转为base64
}

输出预处理

使用插件修改最终输出：

import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'Custom App Title'
        }
      }
    })
  ]
})

构建产物分析

可视化分析输出结构：

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

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'stats.html'
    })
  ]
})

动态加载控制

配置异步组件加载行为：

// 组件定义
const LazyComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
  timeout: 3000
})

服务端渲染输出

SSR 构建的特殊配置：

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

输出验证机制

添加构建后检查步骤：

import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{js,ts,vue}"'
      }
    })
  ]
})

多环境输出差异

根据环境变量调整输出：

build: {
  minify: isProduction ? 'terser' : false,
  sourcemap: isDevelopment ? 'inline' : false
}

输出路径重写

处理部署路径问题：

export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? '/production-sub-path/' 
    : '/'
})

构建时间优化

并行处理加速输出：

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ],
  build: {
    target: 'es2015',
    cssTarget: 'chrome80'
  }
})

输出格式转换

处理特殊格式需求：

import { vitePlugin as utwm } from 'unplugin-transform-web-monetization'

export default defineConfig({
  plugins: [
    utwm({
      paymentPointer: '$ilp.example.com/123456789'
    })
  ]
})

构建事件钩子

在输出阶段插入自定义操作：

export default defineConfig({
  plugins: [{
    name: 'log-build-complete',
    closeBundle() {
      console.log('Build completed at', new Date().toISOString())
    }
  }]
})