工具链 之 Vite 依赖优化选项（五）

1. rollupOptions

rollupOptions 允许你覆盖 Rollup 的默认配置，Rollup 是 Vite 用于生产构建的打包器。你可以通过此选项来调整依赖打包的行为。

// vite.config.js  
export default {  
  build: {  
    rollupOptions: {  
      // 示例：禁用某些 Rollup 插件  
      plugins: [  
        // ...（你可以移除或添加自定义插件）  
      ],  
  
      // 示例：调整输出配置  
      output: {  
        // ...（你可以修改输出配置）  
      },  
  
      // 示例：调整输入配置  
      input: {  
        // ...（你可以调整入口配置）  
      },  
  
      // 更多 Rollup 选项...  
    },  
  },  
  // 其他配置...  
};

2. minify

minify 选项用于配置是否压缩生产构建的输出代码，以及使用的压缩工具。

// vite.config.js  
export default {  
  build: {  
    minify: 'terser', // 使用 Terser 进行压缩  
    // 也可以设置为 false 来禁用压缩  
  },  
  // 其他配置...  
};

3. cssCodeSplit

cssCodeSplit 选项用于配置是否将 CSS 代码拆分成多个文件。

// vite.config.js  
export default {  
  build: {  
    cssCodeSplit: true, // 启用 CSS 代码拆分  
  },  
  // 其他配置...  
};

4. assetsDir

assetsDir 选项用于配置静态资源（如图片、字体等）在输出目录中的位置。

// vite.config.js  
export default {  
  build: {  
    assetsDir: 'static', // 静态资源输出到 dist/static 目录下  
  },  
  // 其他配置...  
};

5. outDir

// vite.config.js  
export default {  
  build: {  
    outDir: 'dist-prod', // 构建输出到 dist-prod 目录下  
  },  
  // 其他配置...  
};

6. rollupPluginVueOptions

// vite.config.js  
export default {  
  build: {  
    rollupPluginVueOptions: {  
      // Vue 插件的 Rollup 选项  
      // ...  
    },  
  },  
  // 其他配置...  
};

7. brotliSize / chunkSizeWarningLimit

这些选项与构建输出的大小和警告相关。

• brotliSize: 启用 Brotli 压缩并报告其大小。
• chunkSizeWarningLimit: 设置当 chunk 大小超过此限制时发出警告的阈值。

// vite.config.js  
export default {  
  build: {  
    brotliSize: true, // 启用 Brotli 压缩大小报告  
    chunkSizeWarningLimit: 2000, // 当 chunk 大小超过 2000KB 时发出警告  
  },  
  // 其他配置...  
};