本文共 2078 字，大约阅读时间需要 6 分钟。
在过去几年中，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链接：
没有打包器的Web App
@pika/web通过一种新的方式来安装npm依赖项，可以让它们在浏览器中运行，即使它们也有自己的依赖项。它实际上并不是一个构建工具，也不是一个打包器，而是一个依赖项安装工具，可以让你减少对其他工具的依赖，甚至完全可以让Webpack或Parcel直接退役了。
npm install \u0026amp;\u0026amp; 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专家。示例项目
- 一个简单的项目：
- 一个Preact+HTM项目：
- 一个Electron项目，使用了Three.js：
- 英文原文：
更多内容，请关注前端之巅。
转载地址：http://yjpzl.baihongyu.com/