当前栏目
如何看待 TC39 的提案 Module Fragments?
本文转载自微信公众号「勾勾的前端世界」,作者加班的打工人1234。转载本文请联系勾勾的前端世界公众号。
闲逛知乎的时候看到了这个问题,下面只有 2 个回答。贺师俊大佬竟然也关注了这个问题,于是......
以下是知乎原文,欢迎各位去知乎为俺三连:点赞、评论和收藏。
没人邀请,我来勇敢回答一把子这个问题。
首先来看下这个提案到底是什么。
JavaScript module fragments are a syntax for named, inline JS modules, which can be used for bundling multiple modules into a single JavaScript file.
直译一下,JS module fragments 是 JS 模块语法的一个提案,我们也可以叫它 “模块片段”,可用于在单个 JavaScript 文件中写多个模块代码。
简单来说,目前的 ES Modules 是以文件为单位划分的,而 TC39 这个提案的意思是可以更进一步,在同一个 JS 文件中,对代码进行模块的拆分,这有点类似于很多其它编程语言中的 `region` 注释片段。
举个例子,上代码:
- // filename: app.js
- // 定义一个模块 #count
- module "#count" {
- let i = 0;
- // 模块导出一个函数
- export function count() {
- i++;
- return i;
- }
- }
- // 定义另外一个模块 #uppercase
- module "#uppercase" {
- // 导出一个函数
- export function uppercase(string) {
- return string.toUpperCase();
- }
- }
- // 导入模块,此处与 ES 标准化模块语法一致,
- import { count } from "#count";
- import { uppercase } from "#uppercase";
- console.log(count()); // 1
- console.log(uppercase("daniel")); // "DANIEL"
没错,这就是提案中的示例代码,我加了注释。
之所以有这样的提案,大家可以在提案中的动机中找到,大致可以总结为小文件在各类环境中的加载成本很高,并且需要借助其他打包工具。
截取一段,用我小学二年级的翻译水平来展示一下:
This proposal adds a syntax to JavaScript to allow for several JavaScript modules in one file. This format can be used as output by bundlers, with low overhead on execution, so that bundlers don't have to emulate as much, and JS engines can see what's going on. It's also convenient to be typed directly by JavaScript developers, and it should be low overhead to fit into existing workflows.
该提案为 JavaScript 增加了一种语法,该语法允许在一个文件中包含多个 JavaScript 模块。这种格式的模块可以被打包输出,以此降低执行成本,因此,传统意义上的打包工具就不再那么重要了,JS 引擎本身可以就可以完成这一系列工作,便于开发者可以直接使用原始的 JavaScript,而且这也很容易让其融入到现有的开发流程之中。
我个人是很支持这个提案的。
从根本上来讲,JavaScript 的诞生太过快速(“草率”),当时也没想到今天会有这么大的应用规模,所以很多高级特性并不完备。
历史上,JavaScript 一直没有模块系统,无法将一个大程序按照各自职责拆分成互相依赖的小模块,再用简单的方法拼装起来。这对构建复杂的大型应用形成了巨大障碍。
现在大家耳详能熟的 Webpack 就是为了更好的解决这一问题而诞生的,不过这一次,不再是社区方案或者工具,终于有人向语言标准下手了,试图从语言层面站出来彻底根治这个问题。
这一语法的出现,在现阶段最大的核心能力就是“模块打包相关”。在该提案的动机里有提到一个非常重要的点:“浏览器预判” ,即浏览器提前预判是否需要预先加载模块,这样一来,就能够区分模块是否需要被加载,从而有效提升加载性能。
当然,如果此提案能够被最终通过,也一定是渐进式的,至于能够释放多大的能量,就看各位大佬的聪明才智了。
xdm,支持此提案的给我点赞走一波……
相关文章
- 鲜为人知但很有用的 HTML 属性
- 翻转再翻转!有意思的水平横向溢出滚动
- 自定义计数器小技巧!CSS 实现长按点赞累加动画
- 过五关!React高频面试题指南
- 软件开发中的十个认知偏差
- 不需要 JS!仅用 CSS 也能达到监听页面滚动的效果!
- 一文读懂TypeScript类型兼容性
- Vue 的响应式原则与双向数据绑定
- 快速掌握 TypeScript 新语法:Infer Extends
- JWT教你如何证明你是我的人!
- 一篇带给你 V8 GC 的实现
- 面试官:请使用JS完成一个LRU缓存?
- 通过可视化来学习JavaScript事件循环
- 新的跨域策略:使用 COOP、COEP 为浏览器创建更安全的环境
- 为什么有人说 vite 快,有人却说 vite 慢?
- 种草 Vue3 中几个好玩的插件和配置
- 超全面的前端工程化配置指南
- Vue 状态管理未来样子
- Volatile关键字能保证原子性么?
- 面试突击:SpringBoot 有几种读取配置文件的方法?