版权声明：原创文章 https://blog.csdn.net/cpongo5/article/details/88996249
\u003cp\u003e在过去几年中，JavaScript打包已经从一种生产环境优化手段演变成几乎所有Web App都必不可少的构建步骤。不管你喜欢与否，打包器已经给Web开发带来了巨大的复杂性，这是个不争的事实。\u003c/p\u003e\n\u003ch2\u003e为什么要进行打包？\u003c/h2\u003e\n\u003cp\u003e现在的JavaScript打包概念可以追溯到很早以前（大约6年前），那个时候我们通常会对JavaScript文件进行最小化处理，或者把很多JavaScript文件串成一个单独的文件，这样可以加快网页的加载速度，并解决HTTP/1.1的并行请求瓶颈问题。\u003c/p\u003e\n\u003cp\u003e那么，为什么这个优化手段会成为开发必不可少的步骤？说到这里，我们不得不提到npm。那个时候，npm正在成为最大的代码库注册中心，前端开发者都十分依赖它。唯一的问题时，如果不进行打包，Node的模块系统就无法运行在Web上。于是，Browserify、Webpack之类的现代Web打包器出现了。\u003c/p\u003e\n\u003ch2\u003e复杂性综合征\u003c/h2\u003e\n\u003cp\u003e现如今，如果不使用像Webpack这样的打包器，构建Web App几乎是不可能的。你可以使用create-react-app创建一个项目，但它会在node_modules目录下安装200多MB的文件，其中包含了1300多个不同的依赖项，而你可能只是为了运行“Hello World!”。\u003c/p\u003e\n\u003cp\u003e其实，想要自己开发一个JavaScript模块系统并不难，而且一些npm包也可以在没有依赖项的情况下直接在Web上运行。但可惜的是，大部分包仍然无法直接运行，可能是因为npm包的遗留依赖项或npm包的导入机制所导致的。\u003c/p\u003e\n\u003cp\u003e于是，@pika/web出现了。\u003c/p\u003e\n\u003cp\u003eGitHub链接：\u003ca href=\"https://github.com/pikapkg/web\"\u003ehttps://github.com/pikapkg/web\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e没有打包器的Web App\u003c/h2\u003e\n\u003cp\u003e@pika/web通过一种新的方式来安装npm依赖项，可以让它们在浏览器中运行，即使它们也有自己的依赖项。它实际上并不是一个构建工具，也不是一个打包器，而是一个依赖项安装工具，可以让你减少对其他工具的依赖，甚至完全可以让Webpack或Parcel直接退役了。\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003enpm install \u0026amp;\u0026amp; npx @pika/web\n✔ @pika/web installed web-native dependencies. [0.41s]\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e@pika/web会检查package.json的manifest，看看有没有导出模块的依赖项，然在在本地web_modules目录中安装这些依赖项。\u003c/p\u003e\n\u003cp\u003e安装好的包可以在浏览器中运行，因为@pika/web把每个包都打包到一个单独的.js文件中。例如，整个preact包被安装成web_modules/preact.js。\u003c/p\u003e\n\u003cp\u003e或许你会说：“它只不过是把打包隐藏了起来，在另一个地方进行打包！”\u003c/p\u003e\n\u003cp\u003e实际上，@pika/web确实是在内部利用了打包来输出Web原生的npm依赖项。\u003c/p\u003e\n\u003cp\u003e@pika/web将打包器的复杂性封装在了一个单独的安装工具中，你不想配置打包器就可以不配置。当然，你也可以继续使用你喜欢的工具：你可以继续使用Babel、TypeScript来增加开发经验，或者使用Webpack、Rollup来优化生产代码。\u003c/p\u003e\n\u003ch2\u003e性能\u003c/h2\u003e\n\u003cp\u003e相比其他打包器，@pika/web的依赖项安装方式（单个JS文件）在性能方面具有更大的优势：依赖项缓存。如果使用其他打包器把依赖项打包成一个大型的vendor.js，那么在更新其中一个依赖项时，用户需要重新下载整个包。而@pika/web则不同，更新其中一个依赖项并不会影响缓存中的其他依赖项。\u003c/p\u003e\n\u003cp\u003e@pika/web旨在解决打包器存在的问题，比如重复代码、冗余代码导致的首次页面加载速度变慢、升级Webpack生态系统导致的bug……\u003c/p\u003e\n\u003cp\u003e另一方面，不进行打包也不是件好事。大文件比小文件的压缩率更高，而且即使HTTP/2可以同时加载多个小文件，但浏览器在发出后续请求时仍然要解析它们。\u003c/p\u003e\n\u003cp\u003e所以，我们必须在性能、缓存效率和复杂性之间做出权衡，而这就是@pika/web存在的意义。\u003c/p\u003e\n\u003ch2\u003e@pika/web使用策略\u003c/h2\u003e\n\u003cp\u003e@pika/web已经彻底改变了我们的Web开发方式。以下是我们使用@pika/web开发pikapkg.com的流程，我们也希望你们在2019年开发新的Web App时也可以使用这个流程。\u003c/p\u003e\n\u003cp\u003e对于新项目，可以抛弃打包器了。使用JavaScript模块语法来写项目代码，使用@pika/web来安装npm依赖项，不需要其他工具。\u003cbr /\u003e\n根据需要来添加其他工具。如果你需要类型系统，就加入TypeScript。如果你想要使用实验性的JavaScript特性，可以加入Babel。如果你想最小化JavaScript代码，可以加入Terser。\u003cbr /\u003e\n如果你觉得有必要，并且有时间，可以试着加入一个打包器，然后进行性能测试。页面首次加载变快了吗？如果是，那就发布出去！\u003cbr /\u003e\n随着项目的增长，持续优化你的打包器配置。\u003cbr /\u003e\n如果你的项目有足够的预算，可以招一个Webpack专家。\u003c/p\u003e\n\u003ch4\u003e示例项目\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e一个简单的项目：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ca href=\"https://glitch.com/edit/#!/pika-web-example-simple\"\u003ehttps://glitch.com/edit/#!/pika-web-example-simple\u003c/a\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e一个Preact+HTM项目：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ca href=\"https://glitch.com/edit/#!/pika-web-example-preact-htm\"\u003ehttps://glitch.com/edit/#!/pika-web-example-preact-htm\u003c/a\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e一个Electron项目，使用了Three.js：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ca href=\"https://github.com/br3tt/electron-three\"\u003ehttps://github.com/br3tt/electron-three\u003c/a\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e英文原文：\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003ca href=\"https://www.pikapkg.com/blog/pika-web-a-future-without-webpack\"\u003ehttps://www.pikapkg.com/blog/pika-web-a-future-without-webpack\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5ca235771b6e9.png\" alt=\"\" /\u003e\u003c/p\u003e\n