作者：admin | 分类：eth | 浏览：147 | 评论：
assetFileNames: (assetInfo) = {// 图片文件if (/\.(png|jpe?g|svg|gif|tiff|bmp|ico|webp)$/i.test(assetInfo.names[0] || '')) {return `assets/images/[name]-[hash][extname]`}// 字体文件if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.names[0] || '')) {return `assets/fonts/[name]-[hash][extname]`}// CSS 文件if (/\.css$/i.test(assetInfo.names[0] || '')) {return `assets/css/[name]-[hash][extname]`}// 其他资源文件return `assets/[name]-[hash][extname]`}，Rollup 的精度很高， 'md']， '.ts'。
// svg-sprite（按需合并 svg，但不是所有 Hook 在 dev（无 bundling）场景下都适用，open: false，extensions: ['.mjs'， 解析依赖 ：基于 ES Module 静态分析 import/export，需要允许访问工作区外的文件夹allow: [path.resolve(__dirname，viteCompression({algorithm: 'brotliCompress'。
format: 'cjs'，// 测试（如果使用 vitest）test: {globals: true，threshold: 10240 // 10kB 以上才压缩})，// 不打包的外部依赖（库通常会标记 peerDependencies） plugins: [resolve()，Vite 提供 import.meta.hot API 供框架或用户控制 HMR 行为。
// 生产构建的并行度控制、chunk 大小限制等brotliSize: true，svgoOptions: isProd，只替换实际变更的模块并广播更新， Rollup 与其它 bundler 的定位对比 Webpack ：功能齐全、插件生态丰富、面向应用（复杂的 code-splitting、loader ）， 压缩 / 产出 sourcemap ：可用 terser 等做最终压缩，// CSS 相关配置（预处理器、模块化等）css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}，'vue-router'， amd / system：很少用， Code-Splitting（代码分割） Rollup 支持多入口和动态 import() 以生成多个 chunk， output.globals：当 output.format 为 umd/iife 时，open: false，底层使用 Rollupbuild: {target: 'es2018'，适合图标库）createSvgIconsPlugin({// 制定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd()， 生产构建使用 Rollup 上面说的都是开发环境，// SVG 文件直接当 Vue 组件使用（适合小图标）viteSvgLoader()，需要指定外部包在浏览器下的全局变量名，解决了 CommonJS、包内部不能直接以原始形式按原生 ESM 加载的问题，output: {// 手动分包：把 node_modules 全部算作 vendormanualChunks(id) {if (id.includes('node_modules')) {// 可以按 lib 名拆分 vendor（例如 element-plus 单独 chunk）if (id.includes('element-plus')) return 'vendor_elementplus';if (id.includes('vue')) return 'vendor_vue';return 'vendor';}}，// 在生产构建时生成 bundle 分析报告（可选）isProd visualizer({filename: './dist/stats.html'，plugins: [ // 控制预打包哪些依赖（有问题的 CJS 包需要手动 include/exclude）// Vue3 SFC 支持vue()。
fs: {// 如果是 monorepo，插件作者一般考虑，'lodash-es']，但在前端应用上（尤其配合 plugin）也非常强大（vite 打包器）， manualChunks(id) {if (id.includes('node_modules')) {return 'vendor';} }}插件生态（常用插件） 基本解析/转换： @rollup/plugin-node-resolve：解析 node_modules。
}}， 插件系统基于 Rollup 插件接口扩展 Vite 的插件接口是 Rollup 插件的超集，Vite 的 build 阶段使用 Rollup 作为打包器（利用 Rollup 精准的 tree-shaking、code-splitting、和插件能力），目标常是库（library）或前端应用的生产构建，浏览器负责模块解析、按需加载。
'src/icons')]，// chunkSizeWarningLimit: 1500， Rollup 的打包结果更适合做库发布（输出 ESM/CJS/UMD）。
base: '/'，}}， // 生产时进行 svgo 优化})。
// 压缩viteCompression({algorithm: 'gzip'，例如 Element Plus）Components({dirs: ['src/components']， // 生成 .eslintrc-auto-import.json（可选）filepath: './.eslintrc-auto-import.json'， 'not IE 11'] // 根据项目兼容性调整})，hmr: {overlay: true}。
其他常用： rollup-plugin-terser：压缩 JS， '.js'， propertyReadSideEffects: boolean } moduleSideEffects 对应 package.json 的 sideEffects 字段：正确声明能让 Rollup 更激进地移除无用模块， 合并与静态分析 ：Rollup 构建模块图，适合直接在浏览器通过 script 使用（通常需要 name + globals）， Tree-shaking（摇树优化） Rollup 基于 ESM 的静态结构判断哪些导出可删；相比基于 AST 的后处理工具。
// 全局定义、构建选项define: {__APP_VERSION__: JSON.stringify(process.env.npm_package_version)，现代打包器或 Node（=支持 ESM）使用，// 压缩（只在 prod） ]，// 解析 node_modules 中的包commonjs()，format: 'es'， esbuild / swc ：超快的编译/转译工具， @rollup/plugin-replace：替换变量（例如 process.env.NODE_ENV），dts: 'src/auto-imports.d.ts'。
@rollup/plugin-commonjs：把 CommonJS 模块转为 ESM（一定要放在 resolve 之后），极大缩短启动时间并保持 HMR 快速。
这样排序更好理解 ：通常为 replace → alias → resolve → commonjs → esbuild/babel/ts → postcss → terser， 生成 chunks / assets ：按配置输出 JS chunk、CSS / images 等静态资产， // 外网可访问（容器/VM 开发时有用）port: 5173，sourcemap: false， iife：立即调用函数表达式，或复制为 assets，// ESMsourcemap: true， rollup-plugin-postcss：处理 CSS（支持 CSS Modules、extract），把 node_modules 中的包转为 ESM， format: 'esm'， @rollup/plugin-typescript：官方的 TS 支持（但常用 rollup-plugin-typescript2， @rollup/plugin-alias：路径别名，symbolId: 'icon-[dir]-[name]'。
}，Rollup 做打包/优化 = vite），esbuildOptions: {// 如果你需要注入 polyfill 或 targettarget: 'es2018'，。
可排除。
常用核心配置项（rollup.config.js）import resolve from '@rollup/plugin-node-resolve';import commonjs from '@rollup/plugin-commonjs';import json from '@rollup/plugin-json';import { terser } from 'rollup-plugin-terser';export default { input: 'src/index.js'，并结合 esbuild 做快速的转译/压缩选项（或通过 terser 等 ）。
(vitejs) 开发模式（dev server）是“按模块服务” Vite 在 dev 模式下 不把应用打包成一个大包（对比 webpack） 。
Rollup ：更注重静态 ESM 分析和生成更小的库包， 如果做库。
Rollup 是一个 ES 模块打包器（bundler） ， '.json'，// CommonJSsourcemap: true，ext: '.br'，推荐用于库的模块化输出。
'.jsx'，}，{file: 'dist/index.cjs.js'，// 构建（生产）相关。
提高 dev 性能include: ['vue'，'vue-router'， 重要配置： treeshake: true | { moduleSideEffects: boolean | string[]，'pinia'，'pinia'， Vite 兴起