喂喂！晚上有空吗？想跟你唠唠前端打包那点事儿——Zui近总有人问我“Rollup和Vite生产流程到底怎么整啊？”搞得我dou有点烦了……今天干脆一次性说清楚，保证不端架子，像咱俩平时聊天一样！

咱就是说啊！谁还没被Webpack的配置搞哭过？各种loader、plugin堆在一起跟毛线团似的……Rollup就不一样了！它专注ES模块打包，代码geng干净纯粹——尤其适合Zuo库开发或者想让项目体积瘦下来的时候！

那 Rollup 的核心配置到底有啥？别慌，我用三句话给你掰扯明白：

input 就是入口文件嘛！写法超灵活： 单入口直接写字符串 input: 'src/index.js'； 多入口Ke以写数组 ； Zui推荐对象写法！比如 input: { home: 'src/pages/home.js', about: 'src/pages/about.js' }——这样打出来每个页面独立一个文件，公共部分还Neng抽成 common.js 文件~完美适合多页应用有没有！

output 可是重中之重！它控制着Zui终产物的格式和路径。比如说： javascript output: 这样就Neng同时输出两种格式的包——库开发的时候简直不要太方便！对啦format可选的值还有"umd"不过现在基本用esm/cjs居多~

哦对！差点忘了 external 属性！这个坑我踩过好几次……别以为它只是“排除依赖”哦~其实是告诉 RollUp：“这些模块不用你管！我自己从 nodemodules 或 CDN 引！”比如说 vue、react 这种大库，Ru果全打进包里得有几百KB呢！直接 external 掉就行～写法也hen皮：字符串数组 正则 /^lodash/ 甚至函数判断 id.includes——函数写法直接批量排除 nodemodules 所有内容！爽歪歪～

plugins 就是 RollUp 的外挂嘛！官方插件够用一辈子：@rollUp/plugin-node-resolve、@rollUp/plugin-commonjs…… Vite Yi经内置这俩了所以不用手动装！要是想处理.vue文件？加个rollUp-plugin-vue就行；想压缩代码？@rollUp/plugin-terser安排上～

害~简单来说 plugins 就是帮 RollUp 解决“臣妾Zuo不到”的问题——它本身只会处理 ESModule 文件嘛~

咱就是说 Vite 的开发服务器快归快，但一到 build 的时候总感觉有点懵对吧？其实啊……Vite 的生产构建本质上就是 “套了壳子的 RollUp ”！不信你kan执行 vita build 的时候它偷偷干了这三件事：

记得以前用 RollUp 得手写 rollUp.config.js 文件吧？现在不用啦！所有 RollUp 的配置dou塞在 vite.config.ts 的 build.rollUpOptions 里就行～ Vite会自动把你的配置跟内置默认值合并Zui后生成一份标准 RollUp config 对象~

举个例子哈👇Ru果你想改 output.dir 的路径，Ke以这么写： javascript // vite.config.ts export default defineConfig({ build:{ rollUoOptions:{ // ←注意这里哦~ output:{ dir:'./my-dist' // 默认 dist →改成 my-dist } } } }) 是不是比手写 rollUo.config.js方便一百倍?!

合并完 config之后呢 ? Rol lup会调用 rollUo . rol lup 方法启动构建 .这个过程中呀 ,它会从 input入口开始 ,递归解析所有依赖 :先 resolveId → load → transform …Zui后建成一棵完整 dependency graph !

悄悄说一句 :这个阶段只会在内存里跑一遍 ,不会生成任何文件 ~等所有 moduledou处理完 ,才进入下一步 !

Zui后一步就是生成产物啦 ! Rol lup有两个方法 : generate 和 write . generate 只在内存里生成 JS/CSS/HTML 文件 ; write 则会先调用 generate 再把东西写到磁盘 ~

对啦 !构建过程中 Rol lup还会自动帮你Zuo Tree-shaking 和 Scope Hoisting ,连 CSSdou会被压缩成单独の .css 文件 !是不是瞬间觉得 Vita + Rol lup=无敌组合?!

哎哎哎 ~刚才说到 Tree-shaking优化体积 ,突然想到个题外话 !你们有没有遇到过这种情况 :自己辛辛苦苦Zuoの小网站 ,内容也算独特吧 ?但百度搜索半天dou找不到 ?害 !我之前也踩过这个坑 …后来查资料才知道原因可多咧 :

呀 ~可Neng是「内容质量不够」 —— Ru果你的页面全是复制粘贴の垃圾信息 ,蜘蛛爬一次就嫌无聊走啦 ;然后呢 ~「网站加载速度慢」也是大忌 ! Rol lup帮你打的包Ru果太大 ,用户打开dou卡半天 ,蜘蛛geng懒得呆了 ;还有一种情况 ——「没提交站点地图」!就算蜘蛛来了不知道去哪爬怎么办 ?赶紧去百度站长平台提交一下 sitemap.xml吧 ~

哦对咯 !跟咱们今天聊のRol lup/Vita也有关系 :Ru果你的构建配置乱哄哄 ,间接影响加载速度 ,那不收录也是正常の ~所以呀学好构建工具 ,不仅Neng让项目geng快 ,还Neng帮搜索引擎蜘蛛geng好地爬你的网站呢 !意外发现叭 ~

说实话哈 …刚开始玩Rol lup的时候真のhen懵 :为什么有时候 external没用 ?为什么 output.format选 esm却报语法错 ?直到后来才明白 ——Rol lup虽然专一但hen傲娇 !

比如说 external 判断错路径 :要是 id.includes写成 id.includes少个s……那可真是欲哭无泪 ;再比如说 output.format选 esm却给 Node.js项目用 ——Node默认不认 ESModule呀哥哥 !得加 "type":"module"到package.json才行 ;还有 plugins顺序错了之坑 :要是先 transform再 resolveId …那肯定一堆 module找不到报错 !

不过没关系 ~踩得多了你就明白了 :Rol lup不是难用 ,只是需要耐心摸清它の脾气 .而 Vita则像个贴心管家 ,把这些麻烦事dou替你包办啦 ~只要稍微改改 build.rol lupOptions就Neng搞定大部分需求 ~

怎么样 ?这回彻底搞懂 Rol lup 和 Vita production flow啦吧 ?下次再有人问起 ,直接把这篇文章甩给他kan !记得点赞哦～不然下次不讲啦 😜