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

Posted 2021-04-29 前端之巅

作者｜Fred K Schott

译者｜无明

在过去几年中，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 直接退役了。

npm install && npx @pika/web
✔ @pika/web installed web-native dependencies. [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

 活动推荐

GMTC 全球大前端技术大会上，我们邀请到了来自 Google、BAT、美团、京东、滴滴、字节跳动等 60+ 一线技术专家与你共话前端那些事，涵盖小程序、Flutter、前端安全、工程化、性能优化等 20+ 热点技术，不可错过。欢迎点击“阅读原文”了解详情。