快手、孩子王、华为等专家分享大模型在电商运营、母婴消费、翻译等行业场景的实际应用 了解详情
写点什么

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

  • 2019-04-02
  • 本文字数:1883 字

    阅读完需:约 6 分钟

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 直接退役了。


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


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



2019-04-02 08:0016061
用户头像

发布了 731 篇内容, 共 446.8 次阅读, 收获喜欢 2001 次。

关注

评论 2 条评论

发布
用户头像
兄弟那么6,来我们公司吧,在泰国,月薪大几万,v我,TH0631280401
2019-04-07 16:22
回复
去泰国面向枪口编程吗😃
2019-10-14 17:34
回复
没有更多了
发现更多内容

基于 SRAM 的存内计算助力实现节能 AI

申公豹

存内计算

如何定义“易用”?无代码/低代码开发平台能力探讨

NocoBase

开源 软件开发 低代码 低代码开发平台 无代码

一文详解静态图和动态图中的自动求导机制

百度Geek说

Python 深度学习 自动求导 autodiff

Boxy SVG for Mac v4.23.3 免激活版 矢量图编辑器

iMac小白

部署篇 | MatrixOne与MySQL全面对比

MatrixOrigin

分布式数据库 云原生数据库 MatrixOrigin MatrixOne HTAP数据库

快速熟悉 MatrixOne 内核前端

MatrixOrigin

分布式数据库 云原生数据库 MatrixOrigin MatrixOne HTAP数据库

流批一体化数据加工处理之记录过滤

大河

科蓝软件启动鲲鹏原生应用开发合作

彭飞

Room Arranger for mac v9.8.2.644中文激活版 房屋布局设计软件

iMac小白

华为云软件开发生产线CodeArts开发者实践8件套——开发者的进阶宝典!

华为云PaaS服务小智

软件开发 华为云

有奖调查 | @所有人,MO有一份问卷邀您填写~

MatrixOrigin

分布式数据库 云原生数据库 MatrixOrigin MatrixOne HTAP数据库

Ableton Live 12 for mac v12.0b26激活版 音乐制作工具

iMac小白

云原生安全DevSecOps思考

薛猫

云原生 k8s 安全 DevSecOps

听GPT 讲Rust Tokio源代码(3)

fliter

解密JavaChassis3:易扩展的多种注册中心支持

华为云开发者联盟

Java 开发 华为云 华为云开发者联盟

亿级流量高并发春晚互动前端技术揭秘

京东科技开发者

深度神经网络中的BNN和DNN:基于存内计算的原理、实现与能量效率

申公豹

存内计算

分享一款轻量化、适合程序员的低代码开发工具

高端章鱼哥

低代码 应用开发 JNPF

代码手术刀-自定义你的代码重构工具

京东科技开发者

2024年1月文章一览

codists

「AI Party」喊你来!百度Create大会4月16-17日在深圳举办

飞桨PaddlePaddle

百度 AI 开发者大会

5 款轻松上手的开源项目

EquatorCoco

开源 项目开发

一行命令找出 Linux 中所有真实用户

互联网工科生

Linux

Wireshark使用技巧

小齐写代码

2023年12月文章一览

codists

codists

低代码,流行的软件开发方式

互联网工科生

软件开发 低代码 JNPF

过年前 再带大家卷一波Go高质量知识点

王中阳Go

Go golang go面试题 后端面试题

听GPT 讲Rust Tokio源代码(2)

fliter

阿里集团基于Fluid+JindoCache加速大模型训练的实践

阿里技术

阿里 大模型 Fluid JindoCache

pika开源:替代WebPack的全新JS构建工具_大前端_Fred K Schott_InfoQ精选文章