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 \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专家。
示例项目
- 一个简单的项目:
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
更多内容,请关注前端之巅。
pika开源:替代WebPack的全新JS构建工具相关推荐
- 快70倍!新一代JS构建工具:ESBuild SWC浅析
首先, ESBuild & swc是什么? ESBuild[1]是基于Go语言开发的JavaScript Bundler, 由Figma前CTO Evan Wallace开发, 并且也被Vit ...
- npm run buil构建后页面白屏_从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- 从Npm Script到Webpack,6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比 小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
- 【总结】1198- 总结 2021 年 JavaScript 新一代构建工具对比
本文译自:https://css-tricks.com/comparing-the-new-generation-of-build-tools/ 在过去的一年里,出现了一批新的开发者工具,它们正在紧跟 ...
- 更快的Maven构建工具mvnd和Gradle哪个性能更好?
作者 | 磊哥 来源 | Java中文社群(ID:javacn666) 转载请联系授权(微信ID:GG_Stone) Maven 作为经典的项目构建工具相信很多人已经用很久了,但如果体验过 Gradl ...
- Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)——vite.config.js配置文件
Vue 2 中,使用Vite作为前端构建开发工具,替代webpack(一)--vite.config.js配置文件 当前版本 vite@2.3.7和vite@2.4.4 "vite" ...
- Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录 前言 一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
阅读目录 理想的前端开发流程 Gulp 为何物 webpack 又是从哪冒出来的 结论 文章有点长,总共 1800 字,阅读需要 18 分钟.哈哈,没耐心的直接戳我到高潮部分. 理想的前端开发流程 在 ...
- 程序员为教师妻子开发专属应用;2020 最佳开源项目出炉;中国构建全星地量子通信网|开发者周刊
CSDN开发者周刊:只为传递"有趣/有用"的开发者内容! 本周热门项目 0.程序员为教师妻子开发应用:将 iPhone 变成文档摄像头 https://9to5mac.com/20 ...
最新文章
- 漫画 | 上班第一天,前端把后端告上县衙,还列了 5 宗罪!
- 基于Selenium2和TestNG的自动化测试
- 解析python数据后用html输出
- linux编译配置过程,make menuconfig/.config/Kconfig的关系
- 《Doing It - Management 3.0 Experiences》作者访谈
- 第3周实践项目3 求集合并集
- 404. Sum of Left Leaves
- You can‘t specify target table ‘XXX‘ for update in FROM clause
- google 确定某点海拔高_一份“高投资回报率”的用户体验度量方法指南
- 软件设计方法和设计决策
- 省市区三级联动菜单(附数据库)
- 整理struct sockaddr和struct sockaddr_in
- 10g添加用户 oracle_oracle10g下新建/删除用户
- [Swift]判断字符串是否为空
- 客户旅程_指南针的300人工程团队不断交付的旅程
- 智能服装:引爆2016智能穿戴新发展
- 云服务器只能显示控制台吗,云服务器控制台使用方法
- (转载)虚幻引擎3--【UnrealScript教程】章节一:11.Struct结构体
- 1.python网页设计,点击按键显示对话窗口
- 简单说 一道JS闭包面试题
热门文章
- LeetCode Weekly Contest 27
- iOS开发网络篇—NSURLConnection基本使用(一)
- 说说设计模式~大话目录(Design Pattern)
- cocos2dx 自学记录(4)-- 写一个自己的界面
- 电脑总是死机 报Service Control M Hid input service 服务因下列错误而停止
- TokuDB · 引擎特性 · HybridDB for MySQL高压缩引擎TokuDB 揭秘
- 《Adobe Flash Professional CC经典教程》——1.3 使用“库”面板
- Android5.0之CardView的使用
- 通过 Jersey Http请求头,Http响应头,客户端 API 调用 REST 风格的 Web 服务
- HDU(1856),裸的带权并查集