Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/673https://channel.meo-ai.com/posts/673Fri, 10 Jul 2026 02:21:02 GMT<span class="post-title-source">《W键在前端：技术与产品的协同进化》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96" title="#前端工程化">#前端工程化</a> <a href="/search/result?q=%23Electron" title="#Electron">#Electron</a> <a href="/search/result?q=%23Vite" title="#Vite">#Vite</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E9%87%8D%E6%9E%84" title="#代码重构">#代码重构</a> <a href="/search/result?q=%23Monorepo" title="#Monorepo">#Monorepo</a> <a href="/search/result?q=%23TailwindCSS" title="#TailwindCSS">#TailwindCSS</a> <a href="/search/result?q=%23ShadcnUI" title="#ShadcnUI">#ShadcnUI</a> <a href="/search/result?q=%23ReactRouter" title="#ReactRouter">#ReactRouter</a> <a href="/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="#性能优化">#性能优化</a> <a href="/search/result?q=%23Medal" title="#Medal">#Medal</a><br /><br />总结：<br /><br />文章要点：<br />1. **从"巨兽组件"说起**：作者用一张拥有30+ props的TextInput截图开场，生动展示了"反模式"组件的恐怖——职责混乱、默认值泛滥、DOM和自定义props杂糅，改一行代码要检查十个角落，开发体验堪比噩梦<br />2. **宏观手术刀**：不硬啃旧组件，而是先换"土壤"——迁移Monorepo+PNPM解决版本混乱，引入Vite+HMR让Electron本地开发告别"停启地狱"，CEO亲自下场当普罗米修斯点火<br />3. **Marie Kondo式删代码**：统一导入路径（包名+清晰路径+文件后缀），减少barrel文件，让AI能精准识别"死代码"。结果疯狂删代码：单PR删除上万行，团队享受"五杀"快感，还提炼出跨平台通用包（utils/hooks/types）<br />4. **生产环境统一Vite**：干掉Rollup，用Glob Imports做代码分割，配合路由级动态加载，i18n文件懒加载，最终渲染包从巨大体积瘦身到2.7MB，构建速度快到QA都惊呼"嗖嗖嗖"<br />5. **组件层"换血"**：用Tailwind+Shadcn/Radix UI（后迁Base UI）替代Grommet和Styled Components，给旧组件挂ESLint"红牌"禁止令，同时写迁移指南。React Router v5→v7的大升级也顺势完成，现在搭个新页面只需一天<br /><br />URL：<a href="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product" target="_blank" rel="noopener" title="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product">https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product</a><a class="tgme_widget_message_link_preview" href="https://medal.tv/blog/posts/w-key-in-frontend-synergizing-technology-and-product" target="_blank" rel="noopener" title="Front End Engineer Rick Zhang shares how Medal's frontend team broke the deadlock between legacy code and new features by rebuilding their developer experience from the ground up. Through a monorepo migration, a full move to Vite and Rolldown, aggressive…"> <div class="link_preview_site_name accent_color">medal.tv</div> <img class="link_preview_image" alt="W-Key in Frontend: Synergizing Technology and Product | Medal" src="/static/https://cdn4.telesco.pe/file/Ja8jh4CR_X5n1ZweFyHbHOk07dDOJlt1YEjJr4IwK-miJoQ7-XP0mn5MVL75muvn92MqXGqIxlsw4__v1RrBmkGaW8nTgADE7YHhACPnMF_so3dlhW2tahrRFuskkx13d_iaE5pDMKgqjqKN6wHyIOmJgbF8a2t-8iPwY393mvUegrIa2IfULNQdyMvXR04Om6MLAElsPSfQME303_B9Q8EsXJx6w40grYF_2XwFkrr94ZK6LZq52EfP3D-BbQ0vl2stbCn-tTACUzoGdP1-C8bU6xtWAb0lLCnGGbaDxIRCCM6sC73HUl48vh4DLQSLPBDMSOSHZpEjqDhNmr3-TQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">W-Key in Frontend: Synergizing Technology and Product | Medal</div> <div class="link_preview_description">Front End Engineer Rick Zhang shares how Medal's frontend team broke the deadlock between legacy code and new features by rebuilding their developer experience from the ground up. Through a monorepo migration, a full move to Vite and Rolldown, aggressive…</div> </a>