大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
什么是Go
Go 语言的出现是为了解决 Google 公司内开发软件基础设施时由于多核处理器、系统的网络化、大规模计算机集群和 Web 编程模型而带来的诸多问题。
Go 语言起源于 2007 年,并于 2009 年正式对外发布。从 2009 年 9 月 21 日开始,Google相关员工利用 20% 的空余时间参与到了 Go 语言的研发工作。
2009 年 11 月 10 日,Google 开发团队将 Go 语言项目以 BSD 授权协议正式开源,并公布了 Linux 和 Mac OS X 版本,于同年 11 月 22 日公布了 Windows 版本。
2010 年 5 月起,Google 将 Go 语言投入到后端基础设施的实际开发中。
注意:Go语言基于BSD 可用协议,这意味着Go是一门完全免费开源的编程语言,可用于商业软件的代码开发,且无需支付任何费用。
根据2023年的最新数据,Go在所有语言的排名中处于第11位 > 大于Rust的 20 名,但是 < PHP(10)< JavaScript(7)< Java(4)< C++(3) < C(2)< Python(1)。
在过去几年,Go在前端圈也激起了不少浪花,前端很多基建都是建立在Go语言的基础之上的,本文将重点列举几个基于Go的前端明星项目。当然,不一定全,如果有不足,欢迎大家在在评论区补充。
esbuild
esbuild 是 JavaScript 工具生态中一个相对较新的成员。 于 2020 年 1 月首次在 GitHub 上开源,它使用 Go 作为高度并行化的 JavaScript 编译器。
esbuild 的生态非常活跃和繁荣,每周下载量超过 920 万次。esbuild的目标与Babel类似,即将新的 JavaScript 特性编译成兼容旧浏览器的代码,同时为Source Maps和代码压缩提供开箱即用的支持,也包括打包代码(以及通过其加载器系统的其他非 js 资产)等能力。
esbuild 最突出的特点就是打包速度极快 (extremely fast),下图是 esbuild 跟 webpack, rollup、Parcel 等打包工具打包效率的一个 benchmark。
但是需要注意的是,esbuild需要一个 ES6 环境,对于一些特殊场景可以使用polyfill,比如core-js。
注意:core-js是一个完全模块化的javascript标准库, 包含ECMA-262至今为止大部分特性的polyfill,如Promises、Symbols、Collections、iterators、typed arrays等等,以及一些跨平台的WHATWG / W3C特性的polyfill,如WHATWG URL
Vite
Vite 使用 Go,其实是通过 esbuild 间接引用的!
冷启动开发服务器时,Vite基于打包器的构建设置必须在提供服务之前快速地抓取并构建整个应用程序。而 Vite 通过将应用程序中的模块分为两类:依赖项和源代码来改进开发服务器启动时间,而这里的依赖项就是基于esbuild来处理的。
依赖项主要是纯 JavaScript,在开发过程中不会经常更改。 一些大型依赖项(例如具有数百个模块的组件库)处理起来非常昂贵,而且依赖项也可能以各种模块方式(例如 ESM 或 CommonJS)发布。
export default defineConfig({
esbuild: {
// ESBuildOptions 扩展了 esbuild 转换选项,最常见的用例是自定义 JSX
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
})
Vite 使用 esbuild 预打包依赖项,而 esbuild 是用 Go 编写的,预打包依赖项的速度比基于 JavaScript 的打包器快 10-100 倍。至于Vite为什么不在生产环境使用esbuild,官方是这么说的:
虽然 esbuild 非常快并且已经是一个非常强大的打包器,但打包应用程序所需的一些重要功能仍在开发中,比如:代码拆分和 CSS 处理。 就目前而言,Rollup 在这些方面更加成熟和灵活。Vite不排除在未来稳定这些功能时使用 esbuild 进行生产构建的可能性。
snowpack
与 Vite一样,snowPack 使用 Go,其实也是通过 esbuild 间接引用的!
Snowpack 已经在内部使用 esbuild 作为默认的 JavaScript、TypeScript 和 JSX 文件的单文件构建器。
// snowpack.config.mjs
// 默认使用esbuild
export default {
optimize: {
bundle: true,
minify: true,
target: 'es2018',
},
};
Snowpack v3.0 通过内置构建优化管道将此集成更进一步。 打包、压缩和转换站点以用于生产环境输出,其时间仅为其他打包器的 1/100。
umijs
umi,中文可发音为乌米,是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。
umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等等。
umi享受Go的红利与前面2个一样,也是通过esbuild来完成的,通过添加esbuild的相关loader即可。比如下面的配置内容:
// webpack.config.js
const esbuild = require('esbuild')
module.exports = {
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: esbuildLoader,
options: {
handler: [
// [mfsu] 3. add mfsu esbuild loader handlers
...mfsu.getEsbuildLoaderHandler()
],
target: 'esnext',
implementation: esbuild
}
}
}
]
}
}
本文结论
本文主要和大家介绍下几个基于Go的前端明星项目。包括:esbuild、Vite、snowPack,umijs等等,虽然Vite、snowPack、umijs其实是通过esbuild来间接享受了Go的红利,但是确实也是Go赋能的明星项目。
因为篇幅有限,文章并没有过多展开,针对其中的任何一个项目我都有单独出文章进行详细介绍,大家可以从我的主页查看、阅读。如果有兴趣,文末的参考资料也提供了大量优秀文档以供学习。
参考资料
https://learnku.com/go/wikis/26446
https://github.com/avelino/awesome-go
https://github.com/maxence-charriere/go-app
https://github.com/metacall/core
https://github.com/yosssi/gcss
https://github.com/wellington/go-libsass
https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild
https://umijs.org/blog/mfsu-independent-usage#esbuild-handler