pika 开源:替代 WebPack 的全新 JS 构建工具

在过去几年中,JavaScript 打包已经从一种生产环境优化手段演变成几乎所有 Web App 都必不可少的构建步骤。不管你喜欢与否,打包器已经给 Web 开发带来了巨大的复杂性,这是个不争的事实。

为什么要进行打包?

现在的 JavaScript 打包概念可以追溯到很早以前(大约 6 年前),那个时候我们通常会对 JavaScript 文件进行最小化处理,或者把很多 JavaScript 文件串成一个单独的文件,这样可以加快网页的加载速度,并解决 HTTP/1.1 的并行请求瓶颈问题。

那么,为什么这个优化手段会成为开发必不可少的步骤?说到这里,我们不得不提到 npm。那个时候,npm 正在成为最大的代码库注册中心,前端开发者都十分依赖它。唯一的问题时,如果不进行打包,Node 的模块系统就无法运行在 Web 上。于是,Browserify、Webpack 之类的现代 Web 打包器出现了。

复杂性综合征

现如今,如果不使用像 Webpack 这样的打包器,构建 Web App 几乎是不可能的。你可以使用 create-react-app 创建一个项目,但它会在 node_modules 目录下安装 200 多 MB 的文件,其中包含了 1300 多个不同的依赖项,而你可能只是为了运行“Hello World!”。

其实,想要自己开发一个 JavaScript 模块系统并不难,而且一些 npm 包也可以在没有依赖项的情况下直接在 Web 上运行。但可惜的是,大部分包仍然无法直接运行,可能是因为 npm 包的遗留依赖项或 npm 包的导入机制所导致的。

于是,@pika/web 出现了。

GitHub 链接: https://github.com/pikapkg/web

没有打包器的 Web App

@pika/web 通过一种新的方式来安装 npm 依赖项,可以让它们在浏览器中运行,即使它们也有自己的依赖项。它实际上并不是一个构建工具,也不是一个打包器,而是一个依赖项安装工具,可以让你减少对其他工具的依赖,甚至完全可以让 Webpack 或 Parcel 直接退役了。

复制代码

npminstall && npx @pika/web
✔ @pika/web installed web-nativedependencies. [0.41s]

@pika/web 会检查 package.json 的 manifest,看看有没有导出模块的依赖项,然在在本地 web_modules 目录中安装这些依赖项。

安装好的包可以在浏览器中运行,因为 @pika/web 把每个包都打包到一个单独的.js 文件中。例如,整个 preact 包被安装成 web_modules/preact.js。

或许你会说:“它只不过是把打包隐藏了起来,在另一个地方进行打包!”

实际上,@pika/web 确实是在内部利用了打包来输出 Web 原生的 npm 依赖项。

@pika/web 将打包器的复杂性封装在了一个单独的安装工具中,你不想配置打包器就可以不配置。当然,你也可以继续使用你喜欢的工具:你可以继续使用 Babel、TypeScript 来增加开发经验,或者使用 Webpack、Rollup 来优化生产代码。

性能

相比其他打包器,@pika/web 的依赖项安装方式(单个 JS 文件)在性能方面具有更大的优势:依赖项缓存。如果使用其他打包器把依赖项打包成一个大型的 vendor.js,那么在更新其中一个依赖项时,用户需要重新下载整个包。而 @pika/web 则不同,更新其中一个依赖项并不会影响缓存中的其他依赖项。

@pika/web 旨在解决打包器存在的问题,比如重复代码、冗余代码导致的首次页面加载速度变慢、升级 Webpack 生态系统导致的 bug……

另一方面,不进行打包也不是件好事。大文件比小文件的压缩率更高,而且即使 HTTP/2 可以同时加载多个小文件,但浏览器在发出后续请求时仍然要解析它们。

所以,我们必须在性能、缓存效率和复杂性之间做出权衡,而这就是 @pika/web 存在的意义。

@pika/web 使用策略

@pika/web 已经彻底改变了我们的 Web 开发方式。以下是我们使用 @pika/web 开发 pikapkg.com 的流程,我们也希望你们在 2019 年开发新的 Web App 时也可以使用这个流程。

对于新项目,可以抛弃打包器了。使用 JavaScript 模块语法来写项目代码,使用 @pika/web 来安装 npm 依赖项,不需要其他工具。

根据需要来添加其他工具。如果你需要类型系统,就加入 TypeScript。如果你想要使用实验性的 JavaScript 特性,可以加入 Babel。如果你想最小化 JavaScript 代码,可以加入 Terser。

如果你觉得有必要,并且有时间,可以试着加入一个打包器,然后进行性能测试。页面首次加载变快了吗?如果是,那就发布出去!

随着项目的增长,持续优化你的打包器配置。

如果你的项目有足够的预算,可以招一个 Webpack 专家。

示例项目

  • 一个简单的项目:

https://glitch.com/edit/#!/pika-web-example-simple

  • 一个 Preact+HTM 项目:

https://glitch.com/edit/#!/pika-web-example-preact-htm

  • 一个 Electron 项目,使用了 Three.js:

https://github.com/br3tt/electron-three

  • 英文原文:

https://www.pikapkg.com/blog/pika-web-a-future-without-webpack

更多内容,请关注前端之巅。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章