构建配置选项

构建生产版本时候的配置，输出目录、压缩、CSS代码拆分....

export default defineConfig({
  build: {
    // 构建相关的配置
  }
})

target

指定构建产物的 JS 版本和浏览器兼容性。

• 默认设置：Edge 88+ Firefox 78+ Chrome 87+ Safari 14+
• 指定ES版本：target: 'es2015'
• 支持特定浏览器版本: target: 'chrome58'
• 多种配置：target: ['es2020', 'chrome87', 'firefox78']
• 注意：
  • esbuild 虽然很快，但可能不支持某些复杂的或尚未广泛采用的 JS 特性。如果遇到了 esbuild 不支持的特性，那么需要Babel来做补充编译。
  • 更改 build.target 会影响构建的输出大小和性能

// npm install @babel/core @babel/preset-env vite-plugin-babel --save-dev
import babel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    babel({
      babelConfig: {
        presets: [
          ['@babel/preset-env', { targets: '> 0.25%, not dead' } ],
        ],
      },
    }),
  ],
});

polyfillModulePreload

用于决定是否自动注入 module preload 的 polyfill. polyfill预加载

outDir

指定输出目录 dist

assetsDir

指定生成静态资源的输出目录

assetsInlineLimit

小于此阈值的导入或引入的资源将内联为 base64 编码的数据 URI 默认4kb，设为零则关闭优化

cssCodeSplit

启用/禁用 CSS 代码拆分。

• 当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时插入
• 如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中

cssTarget

此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target

cssMinify

允许你单独控制 CSS 文件的最小化压缩方式，独立于 JS 的压缩设置

export default defineConfig({
  build: {
    cssMinify: 'esbuild', // CSS压缩使用esbuild, false 禁用css压缩
    minify: 'terser' // JS压缩使用 terser
  }
});

sourcemap

构建后是否生成 source map 文件

• 如果为 true，将会创建一个独立的 source map 文件
• 如果为 'inline'，source map 将作为一个 data URI 附加在输出文件中
• 'hidden' 的工作原理与 true 相似，只是 bundle 文件中相应的注释将不被保留

rollupOptions

传递给 Rollup 的选项

import image from '@rollup/plugin-image'; // 假设这是一个用于处理图像的 Rollup 插件

// 添加一个 rollup 插件来处理图像
// 指定 some-external-lib 为外部依赖
// 为这个外部依赖提供一个可访问的全局变量 SomeExternalLib
export default defineConfig({
  build: {
    rollupOptions: {
      plugins:[
        images() // 通过这个rollup插件来处理图像
      ],
      external: ['some-external-lib'], // 指定some-external-lib为外部依赖，不会被打包进去
      output: {
      	globals: {
      		'some-external-lib': 'SomeExternalLib'
    		}
    	}
    }
  }
})

控制打包结果的目录结构和分包

export default defineConfig({
    build: {
        rollupOptions: {
            output: {
                entryFileNames: 'js/[name]-[hash].js',
                chunkFileNames: 'js/[name]-[hash].js',
                /*assetFileNames: '[ext]/[name]-[hash].[ext]',*/
                assetFileNames(assetInfo) {
                    const name = assetInfo.name;
                    if (name.endsWith('.css')) {
                        return 'css/[name]-[hash].css';
                    }
                    return 'assets/[name]-[hash].[ext]';
                },
                manualChunks:{
                    'vue-vendor': ['vue', 'vue-router']
                }
            }
        }
    }   
})

commonjsOptions

传递给 @rollup/plugin-commonjs 插件的选项 - 用于将Commonjs模块转换为ES6模块 ？ 原理

lib

将应用打包成一个依赖库，方便其他应用来使用

• entry: 指定入口文件通常是js, 因为库不能使用 HTML 作为入口
• formats: 指定生成的库格式
• fileName: 指定输出文件名, 默认 fileName 是 package.json 的 name 选项
• name: 暴露的全局变量，在 formats 包含 'umd' 或 'iife' 时是必须的

manifest

生成 manifest.json 文件, 包含关于打包输出内容的元数据的文件

• 包含了没有被 hash 过的资源文件名和 hash 后版本的映射
• 使用服务端渲染（SSR）\ 需要动态引用打包后的文件（例如，通过路径映射来确保引用的文件正确）\ 使用了代码分割、按需加载等高级特性，需要根据 manifest.json 来优化资源加载

ssr

生成面向 SSR 的构建

minify

最小化混淆，用于控制构建过程中的 JS 代码压缩和混淆 默认为 Esbuild

terserOptions

传递给 Terser 的选项

write

设置为 false 来禁用将构建后的文件写入磁盘。这常用于 编程式地调用 build() 在写入磁盘之前，需要对构建后的文件进行进一步处理

emptyOutDir

设置为 false 来禁用在构建前清空输出目录，默认为 true

reportCompressedSize

启用/禁用 gzip 压缩大小报告

• 压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能

chunkSizeWarningLimit

设置以字节为单位的文件大小阈值，超过该阈值的 chunk 会发出警告

watch

设置为 {} 则会启用 rollup 的监听器。对于只在构建阶段或者集成流程使用的插件很常用