江苏龙网

  1. 首页 > 人文 > >

2020年：前端开发的痛苦与快乐

作者|AntonSidashin
译者|核子可乐
策划|田晓旭
2020年：前端开发的痛苦与快乐
文章图片

不久之前 ， 我开始为自己的新项目构建一套仪表板 。 这套仪表板中包含一个Node.jsAPI网关（仍处于起步阶段） ， 外加用于记录的Clickhouse：
这就引出了本文的主题：很多朋友可能没有意识到 ， 膨胀已经成为前端世界中的头号难题 。 转译器、捆绑器、编译器再加上观察器 ， 负责在保存过程中对项目进行重新编译、在浏览器中进行热重载 ， 而这一切都让普通JavaScript开发者陷入了无穷无尽的苦难当中 。
下面我为大家列出一份与Vue相关的项目清单 ， 正是它们给我过去半年里的开发工作带来诸多麻烦（全部使用15英寸与16英寸MacBookPro设备）：
Nuxt启动器应用的可调整空间太小 ， 让Macbook用户们感到头痛不已 。 浏览器会不断进行热重载 ， GitHub上的Nuxt项目问题队列中有很多评论都指向这方面内容 。
VuesticDashboard我其实很喜欢这款Vue仪表板的设计与细节 ， 因此打算稍作调整用在自己的项目里 。 在Docker中（MacbookPro16英寸） ， 它的开发者模式启动时长经常会超过2分钟 ， 而com.docker.hyperkit显示CPU占用率达400% 。 考虑到设备中只有4GB内存专供Docker使用 ， 可以想见它在这台MacbookPro上根本无法构建生产版本的文件 。 很明显 ， 它应该想办法使用6GB内存外加“指派”存储卷进行Docker设置 ， 目前我已经根据VSCode说明文档的指示完成了这项调整：
https://code.visualstudio.com/docs/remote/containers-advanced#_update-the-mount-consistency-to-delegated-for-macos
但即使是在开发者模式下保存文件这么一项简单操作 ， 也仍然需要至少10秒钟才能完成 。
为什么？Docker开发环境的出现 ， 极大提高了JavaScript阵营的整体实力 。
据我了解 ， 当大家将主机操作系统文件夹绑定至Docker存储卷时 ， 我们实际上无法在某些JS项目中保存某些文件 ， 这就导致有相当一部分文件需要使用Chokidar或者类似的库进行重新编译 ， 这种未经优化的垃圾堆会极大占用硬件资源 。 虽然这一切与生产构建无关 ， 但单是编译器与捆绑器就足够让Macbook和开发者忙得焦头烂额了 。
如果大家每天只需要面对一个JS/TS项目 ， 而且压根不用Docker、只在自己的主机操作系统上进行开发的朋友来说 ， 这可能不是什么大问题 。 但对于面对完整开发栈的群体 ， 以上问题就根本无法接受了 。 跟我一样 ， 许许多多开发者都喜欢VSCodeContainers项目 ， 但这种喜爱也成为我们痛苦的根源 。
没错 ， Docker本身也有问题 ， 但至少在最近2、3年中 ， 它已经成为我在开发工作中的必选项目 。 这次之所以要使用VSCodeContainers加Docker进行开发 ， 是因为这套组合在便利性、灵活性与强大的可重现性方面简直无可匹敌 。
解决方案:esbuildesbuild是另一款JavaScript捆绑器与缩小器 。 下面来看看它的强大能力 。
闲言少叙 ， 咱们用图说话：
2020年：前端开发的痛苦与快乐
文章图片

这是怎么做到的？
【2020年：前端开发的痛苦与快乐】对于像我这样绝望的开发者来说 ， 它的效果实在是太棒了 。 更重要的是 ， Vue3在其Vite捆绑器中内置esbuild ， 所以我意识到要想摆脱痛苦的生活 ， 我得马上转移到Vue3加ESM这片阵地上 。
我将vuestic替换成了v-dashboard ， 其使用Vue3与Tailwind 。 为此 ， 我得做好学习新技术的准备：
Tailwind；ES模块工作原理；Vue3CompositionAPI及其所有特性；了解在哪里能够获得Axios的ESM版本以及所有相关内容；摆脱尚未全面支持Vue3的vue-chartjs ， 转而适应Chart.js 。但在看到Vite在编译新仪表板时的出色表现 ， 我发现一切都物有所值 。
Vite的提速原理Vite使用ES模块加esbuild带来了极快的处理速度 。 具体的提速原理就是之前提到的那三点 。
ES模块它其实就是我们的老朋友Typescript中的“import”语句 。 现在您已经可以在各种浏览器中直接使用 ， 赞！
这项功能还无法支持所有网络浏览器 ， 也许还要再等一年才能全面普及 。 但它已经可以在最新的Chrome与Firefox中正常使用 ， 因此大家不妨考虑将其引入开发当中 。
Vite会聪明地在适当的地方“偷工减料” ， 而且不需要把JS文件捆绑到开发build当中 。
目前只有一个问题 ， esbuild无法在编译过程中验证Typescript的正确性 ， 但考虑到VSCode与langserver已经完成了验证工作 ， 所以应该没什么关系 。
结果与之前一样 ， 我在开发中会使用.vue单个文件组件与Typescript 。
开发启动瞬时完成 ， Docker的CPU负载为零 ， 热重载同样可以瞬间搞定 。
使用axios、chart.js、高强度toast库以及简单的状态存储管理等元素时 ， 相关内容的生产级构建大概需要20秒——与vuestic相比 ， 这简直是种巨大的转变！
2020年：前端开发的痛苦与快乐
文章图片

就这样 ， 我的日常前端开发体验又回归了正常范围 。 这里建议大家在新项目中尝试使用Vite（如果您更倾向于React或其他框架 ， 也可以尝试使用ES模块+esbuild） 。 它虽然还不完美 ， 仍处于beta测试阶段 ， 但开发者的体验非常重要 。 Vite ， 绝对值得一个机会！
InfoQ读者交流群上线啦！各位小伙伴可以扫描下方二维码 ， 添加InfoQ小助手 ， 回复关键字“进群”申请入群 。 回复“资料” ， 获取资料包传送门 ， 注册InfoQ网站后 ， 可以任意领取一门极客时间课程 ， 免费滴！大家可以和InfoQ读者一起畅所欲言 ， 和编辑们零距离接触 ， 超值的技术礼包等你领取 ， 还有超值活动等你参加 ， 快来加入我们吧！
点个在看少个bug


    推荐阅读


    上一篇：卧颜|23岁女孩廖智因为汶川地震失去双腿，被丈夫无情抛弃，她现状怎样

    下一篇：乳山进口冻猪肉制品新冠检测阳性|乳山发现1份进口冻猪肉制品新冠检测阳性