JavaScript 工具的未来将离 JavaScript 越来越远,一些工具(如 webpack 和 babel)的重要性正在日益下降。为什么?
目前已经证明一些语言(如 Rust、Go 甚至 Zig)在捆绑、转译和编译方面比 JavaScript 具有更好的性能。它们不是单线程的,这在处理大量文件方面具有优势。
是什么原因导致一定要用 JavaScript 开发生态系统的工具?毕竟这些工具主要运行在开发人员的机器上,而不是在浏览器上。此外,JavaScript 开发人员不需要调试这些工具的内部代码。
SWC 是最早摆脱 JavaScript 的工具项目之一,不久之后,Esbuild 发布了,很多人为之兴奋不已,因为在性能方面表现出色,它们成了真正的游戏规则改变者。目前,Vite 2.0 正在底层使用 Esbuild 来提供高性能的构建体验。
最近,JavaScript 工具生态系统中出现了一个新成员——Bun。它的目标是让整个 JavaScript 开发过程更加快速,这是一个全能的工具,它不仅加快了编译和解析的速度,还提供了自己的依赖项管理器工具和捆绑。
这个工具还没有为在生产环境中使用做好准备,但它的未来看起来很光明。本文将介绍这个新工具,以及它与 npm、Esbuild、Babel 和 Webpack 之间的对比。
与其他使用 Rust 或 Go 开发的工具不同,Bun 是用 Zig 开发的。Zig 是一种通用的编程语言和工具链,用于开发和维护健壮、优化和可重用的软件。
尽管它是从头开始开发的,但开发者采用了与 Esbuild 项目类似的开发方式。
Bun 支持一些开箱即用的复杂特性,如 TypeScript、css in Js、JSX,不过还缺少一些基本功能,如源映射、Minifier、摇树优化等。
Bun 的一个显著特性是它提供了自己的 Node 模块解析器实现,这是最值得关注的优化之一。
与 NPM 和 Yarn 一样,Bun 也会创建锁文件,叫作 bun.lockb。这里需要注意的是,它生成的是二进制文件,而不是纯文本文件。为什么是二进制文件?主要是出于性能的考虑。坏处是不便于我们检查 PR 的变化。
检查锁文件的唯一方法是使用下面的命令:
bun install -y
Bun 目前支持下面这些加载器:
Bun 还不是一个公开项目,你需要加入他们的 Discord 频道并发出邀请请求。在进入 Discord 后找到他们的 #invites 频道,然后在“I want bun”频道上发起邀请请求。
你将获得一个一次性的 jarred-sumner/bun 代码库邀请。
要安装 Bun,你需要执行下面的命令:
curl -fsSL https://bun.sh/install | bash
# Manually add the directory to your $HOME/.bashrc (or similar)
BUN_INSTALL="/home/jgranja/.bun"
PATH="$BUN_INSTALL/bin:$PATH"
检查是否可以正常运行:
bun --version
你会看到它还没有达到 1.0.0 版本。正如我前面提到的,它还没有为在生产环境中使用做好准备。
它的用法很简单。如果你熟悉 Yarn 或 NPM,你会发现它们几乎是一样的。
安装包:
bun install
与 Yarn 一样,它将使用已有的 package.json 与锁文件(如果有的话)的组合。
添加或删除包:
bun remove react
bun add preact
我们可以将 Bun 作为执行器:
# instead of `npm run clean`
bun run clean
# if added to the `scripts` in package.json
bun clean
它通过 create 命令提供了与最新的 React 生态系统的一些集成。
我们来创建一个 Next.js 应用:
bun create next ./app
cd app
bun
我们来创建一个 Create-React 应用:
bun create react ./app
cd app
bun
如何生成捆绑文件?
运行bun bun ./path-to.js可以生成 node_modules.bun 文件,它包含了所有导入的依赖项。
你可以通过执行./node_modules.bun > build.js来查看包的内容。
让我们通过运行一些基准测试来了解它的速度。当然,这些都是近似的测量值,并且跟运行环境的配置有关。因为这是开发人员的工具,所以我主要关注最常见的开发任务:
作为参考,我的笔记本电脑配备了 AMD Raizen 7 CPU 和 16GB 内存,系统是 Ubuntu 20.04。
我使用了一个生成随机 jsx 文件的工具。我生成了 21 个随机的 jsx 文件,我将它们包含在所有测试项目中。
这个对比可能不是很公平,但它确实让我们看到这个工具与传统工具相比是多么的快。
转译 React 文件对比
我们可以看到,使用 Bun 和 Webpack+NPM 创建 Create React 应用之间的明显区别。前者几乎没有任何延迟,只需要 4.4 秒就可以完成所有设置。
创建 CRA 对比
之前的结果其实并没有那么令人印象深刻,毕竟我们已经习惯了用其他工具痛击 Webpack。我们来进行一场公平的战斗,比较一下 Bun 和 SWC。
Bun 与 SWC 对比
两者之间的差异非常明显,特别是在处理文件变更方面。在我的笔记本电脑上,Bun 只需要 10 毫秒,而 SWC 需要 70 毫秒。
在模块的安装和操作方面,Bun 也有一些优势。其他工具依赖 NPM 或 Yarn 来完成这项工作,Bun 的性能大约比 NPM 快 4 到 100 倍。
我们已经第二步中看到了两者的巨大差异。不过,我们现在来做一个更基本的例子。我们创建一个 package.json 文件,其中的依赖项如下:
然后我们对第一次安装和基于缓存安装进行基准测试。为了让差异更加明显,我选择了一个大型的库(jspdf)。
Bun 与 NPM 安装包对比
时间差异很明显。如果通过网络安装,速度快 4 倍,如果从缓存中解析,速度会快更多。
Esbuild 是 Bun 真正的竞争对手。对于这个测试,我使用了 Vite,因为它内部使用了 Esbuild。
Bun 与 Vite 在开发服务器方面的对比
我还基于之前相同的代码使用三个主要工具生成了捆绑包。需要注意的是,我们不建议在生产环境中使用 Bun,因为它缺少了相当多的特性。尽管基准测试结果令人印象深刻,但我们还是要持谨慎的态度。
在最坏的情况下,最长构建时间是 7 秒。这三个工具在这方面做得很出色,不是没有道理的。
Bun、Vite、SWC 构建一个用于生产环境的捆绑包。
JavaScript 工具从未像现在这么好过,即使这个工具还没有为在生产环境中使用做好准备,但出现了新的竞争对手总是一件好事。Webpack 的未来还不明朗,它在 JavaScript 领域内外都有很多竞争对手。
Bun 并不是万能的工具,它擅长的是构建网站和 Web 应用。如果要构建库,Bun 团队建议使用 Esbuild,甚至 Rollup。
现在,Bun 开发团队的重心仍然不在生产就绪方面,他们专注于开发以及与现有框架和工具的兼容性。
来源: 前端之巅
webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。
webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。
本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。
Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件
webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。
新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!
Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块
Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。
本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!