您当前的位置:首页 > 电脑百科 > 程序开发 > 程序员

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

时间:2020-11-05 12:07:06  来源:  作者:
2020年:前端开发的痛苦与快乐

 

不久之前,我开始为自己的新项目构建一套仪表板。这套仪表板中包含一个 Node.js API 网关(仍处于起步阶段),外加用于记录的 Clickhouse:

https://github.com/restyler/api-gateway

这就引出了本文的主题:很多朋友可能没有意识到,膨胀已经成为前端世界中的头号难题。转译器、捆绑器、编译器再加上观察器,负责在保存过程中对项目进行重新编译、在浏览器中进行热重载,而这一切都让普通 JAVAScript 开发者陷入了无穷无尽的苦难当中。

下面我为大家列出一份与 Vue 相关的项目清单,正是它们给我过去半年里的开发工作带来诸多麻烦(全部使用 15 英寸与 16 英寸 macBook Pro 设备):

Nuxt

https://nuxtjs.org/

启动器应用的可调整空间太小,让 Macbook 用户们感到头痛不已。浏览器会不断进行热重载,GitHub 上的 Nuxt 项目问题队列中有很多评论都指向这方面内容。

Vuestic Dashboard

https://github.com/epicmaxco/vuestic-admin

我其实很喜欢这款 Vue 仪表板的设计与细节,因此打算稍作调整用在自己的项目里。在 Docker 中(Macbook Pro 16 英寸),它的开发者模式启动时长经常会超过 2 分钟,而 com.docker.hyperkit 显示 CPU 占用率达 400%。考虑到设备中只有 4 GB 内存专供 Docker 使用,可以想见它在这台 Macbook Pro 上根本无法构建生产版本的文件。很明显,它应该想办法使用 6 GB 内存外加“指派”存储卷进行 Docker 设置,目前我已经根据 VS Code 说明文档的指示完成了这项调整:

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、只在自己的主机操作系统上进行开发的朋友来说,这可能不是什么大问题。但对于面对完整开发栈的群体,以上问题就根本无法接受了。跟我一样,许许多多开发者都喜欢 VS Code Containers 项目,但这种喜爱也成为我们痛苦的根源。

没错,Docker 本身也有问题,但至少在最近 2、3 年中,它已经成为我在开发工作中的必选项目。这次之所以要使用 VS Code Containers 加 Docker 进行开发,是因为这套组合在便利性、灵活性与强大的可重现性方面简直无可匹敌。

解决方案: esbuild

https://github.com/evanw/esbuild

esbuild 是另一款 JavaScript 捆绑器与缩小器。下面来看看它的强大能力。

闲言少叙,咱们用图说话:

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

 

这是怎么做到的?

  1. 它使用 Go 语言编写而成,Go 语言可以编译为原生代码;
  2. 解析、输出与源映射生成完全以并行化方式进行;
  3. 不涉及资源成本高昂的数据转换,只需要很少几步即可完成所有操作。

对于像我这样绝望的开发者来说,它的效果实在是太棒了。更重要的是,Vue 3 在其 Vite 捆绑器中内置 esbuild,所以我意识到要想摆脱痛苦的生活,我得马上转移到 Vue 3 加 ESM 这片阵地上。

我将 vuestic 替换成了 v-dashboard,其使用 Vue 3 与 Tailwind。为此,我得做好学习新技术的准备:

  • Tailwind;
  • ES 模块工作原理;
  • Vue 3 Composition API 及其所有特性;
  • 了解在哪里能够获得 AxIOS 的 ESM 版本以及所有相关内容;
  • 摆脱尚未全面支持 Vue 3 的 vue-chartjs,转而适应 Chart.js。

但在看到 Vite 在编译新仪表板时的出色表现,我发现一切都物有所值。

Vite 的提速原理

Vite 使用 ES 模块加 esbuild 带来了极快的处理速度。具体的提速原理就是之前提到的那三点。

ES 模块

它其实就是我们的老朋友 Typescript 中的“import”语句。现在您已经可以在各种浏览器中直接使用,赞!

https://kentcdodds.com/blog/super-simple-start-to-es-modules-in-the-browser

这项功能还无法支持所有网络浏览器,也许还要再等一年才能全面普及。但它已经可以在最新的 Chrome 与 Firefox 中正常使用,因此大家不妨考虑将其引入开发当中。

Vite 会聪明地在适当的地方“偷工减料”,而且不需要把 JS 文件捆绑到开发 build 当中。

目前只有一个问题,esbuild 无法在编译过程中验证 Typescript 的正确性,但考虑到 VS Code 与 lang server 已经完成了验证工作,所以应该没什么关系。

结果

  • 与之前一样,我在开发中会使用.vue 单个文件组件与 Typescript。
  • 开发启动瞬时完成,Docker 的 CPU 负载为零,热重载同样可以瞬间搞定。
  • 使用 axios、chart.js、高强度 toast 库以及简单的状态存储管理等元素时,相关内容的生产级构建大概需要 20 秒——与 vuestic 相比,这简直是种巨大的转变!
2020年:前端开发的痛苦与快乐

 

就这样,我的日常前端开发体验又回归了正常范围。这里建议大家在新项目中尝试使用 Vite(如果您更倾向于 React 或其他框架,也可以尝试使用 ES 模块 +esbuild)。它虽然还不完美,仍处于 beta 测试阶段,但开发者的体验非常重要。Vite,绝对值得一个机会!

延伸阅读:

https://pixeljets.com/blog/frontend-dev-gets-better/



Tags:前端开发   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者:damyxu,腾讯 PCG 前端开发工程师iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点,补足...【详细内容】
2021-12-16  Tags: 前端开发  点击:(15)  评论:(0)  加入收藏
React 简介 React 基本使用<div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js...【详细内容】
2021-11-30  Tags: 前端开发  点击:(19)  评论:(0)  加入收藏
一、Vue框架的开发流程介绍 当我们从github上下载一个前端模板框架到本地后,框架中经常会自带有一些跳转显示类的功能,我们可以通过查看这些功能是如何实现的,进而一步步改造为...【详细内容】
2021-11-03  Tags: 前端开发  点击:(34)  评论:(0)  加入收藏
一、Vue介绍1、什么是Vue 可以独立完成前后端分离式web项目的JavaScript框架2、学习Vue的原因三大主流框架之一:Angular React Vue先进的前端设计模式:MVVM可以完全脱离服务器...【详细内容】
2021-10-22  Tags: 前端开发  点击:(51)  评论:(0)  加入收藏
Web前端开发工程师需要核心掌握HTML/CSS/JS开发,在几年前HTML5标准进入国内后,得到了快速的应用于推广,开发人员为了实现更多的效果和功能,将HTML5的应用推崇到了极高的位置。作...【详细内容】
2021-09-17  Tags: 前端开发  点击:(60)  评论:(0)  加入收藏
前端开发一定会遇到框架的问题,那前端开发时用哪个框架好呢?哪个框架更适合前端初学者呢?我们就来梳理一下三大主流框架。 Reat.js(react)是脸书推出的一个用来构建用户界面的Jav...【详细内容】
2021-07-23  Tags: 前端开发  点击:(118)  评论:(0)  加入收藏
前言后端程序员们常常会争论“什么是最好的语言”,而对于前端来说,我们没有选择,无论爱与恨,我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及...【详细内容】
2021-04-08  Tags: 前端开发  点击:(291)  评论:(0)  加入收藏
基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的,根组件 App 除外。正例:export default { name: &#39;TodoItem&#39;, // ...}复制代码反例:e...【详细内容】
2021-03-10  Tags: 前端开发  点击:(287)  评论:(0)  加入收藏
不久之前,我开始为自己的新项目构建一套仪表板。这套仪表板中包含一个 Node.js API 网关(仍处于起步阶段),外加用于记录的 Clickhouse:https://github.com/restyler/api-gateway...【详细内容】
2020-11-05  Tags: 前端开发  点击:(96)  评论:(0)  加入收藏
在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会给您一个可供选...【详细内容】
2020-09-21  Tags: 前端开发  点击:(64)  评论:(0)  加入收藏
▌简易百科推荐
JAVA开发工程师(北京)本科 3-5年经验 面议 (招1人)岗位职责:1.负责我行应用系统的设计,完成软件编码工作,负责管理代码设计规范等工作;2.根据应用需求分析说明书,评估需求研发的可行...【详细内容】
2021-12-27  just do丶IT公众号    Tags:国企   点击:(1)  评论:(0)  加入收藏
今天聊聊编程的本质。程序就是数据结构+控制+逻辑,程序员编程工作的本质是翻译,翻译机要来了,程序员怎么办?黑客帝国中的程序黑客帝国4就要上映了,不知道前三部你看懂了么?值得多...【详细内容】
2021-12-17  博士聊IT    Tags:程序员   点击:(8)  评论:(0)  加入收藏
梦醒之后,每个人对于这份职业的未来、互联网行业的未来,以及更重要的,自己的未来都有了更现实的判断 文 | 祝颖丽编辑 | 黄俊杰一个生于 1986 年的人,他所走过的前半生:从出生起,...【详细内容】
2021-12-03    财经杂志  Tags:程序员   点击:(15)  评论:(0)  加入收藏
前些天在头条看到一个八二年的哥们,述说自己找工作屡次被拒的问题,在网上引起了广泛的讨论,这件事给我留下了很深的印象,因为这哥们和我同是程序员,都人到中年,上有老下有小。唯一...【详细内容】
2021-12-01  云南贤哥在深圳    Tags:程序员   点击:(20)  评论:(0)  加入收藏
很多读者都问过一个问题:程序员如何实现高速成长?之前也写过相关的文章,强调的主要是夯实计算机体系基础知识。 再说另一个诀窍:多看经典开源项目,这些项目大多是众多顶尖程序员...【详细内容】
2021-11-30  findyi    Tags:程序员   点击:(14)  评论:(0)  加入收藏
近日,一位45岁的网民在中国政府网留言求职,引发关注。该网民自称是一名软件开发人员,今年45岁,精通各种技术体系,“而我辞职回家半年后再回来寻找工作机会的时候,却发现连个面试...【详细内容】
2021-11-17  郭主任    Tags:程序员   点击:(42)  评论:(0)  加入收藏
即使在安全技术取得进步之后,网络犯罪仍在不断增加。据统计,网络犯罪每分钟给企业造成约 290 万美元的损失。主要是因为新技术不断涌现,难以维护安全。随着网络威胁的增加,网络...【详细内容】
2021-11-04  章大千    Tags:编程语言   点击:(40)  评论:(0)  加入收藏
北漂小伙李强(化名),在北京互联网大厂工作7年,月薪3万,离职回老家开摄影店,亏了200万。李强出生于山西一座名不经传的小城市,互联网专业大学毕业的他,没有听父母的劝言回到家乡考公...【详细内容】
2021-10-29  霸王课  今日头条  Tags:程序员   点击:(51)  评论:(0)  加入收藏
程序员是青春饭,这在国内似乎是公认的。所以很多公司不愿招大龄程序员,很多程序员也“知趣”地及早转型。有的做管理,有的做架构,我还见过改行卖保险的。总之,年龄大了不想敲代码...【详细内容】
2021-10-27  编程的艺术    Tags:   点击:(29)  评论:(0)  加入收藏
软件工程专业有Web开发、移动终端开发、大数据开发、计算机系统工程师、视频开发工程师、计算机软件应用工程师等就业方向。第一,Web开发。Web开发包括前端开发和后端开发。...【详细内容】
2021-10-19  辰新   企鹅号  Tags:软件工程   点击:(79)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条