前几天听一个朋友说到 snowpack, 便去去看了下这个包是干什么的,看了下官网,发现这个东西还是蛮有意思的。号称 无需打包工具(Webpack,Parcel)便能将代码结果实时展现在浏览器中。可以先看以下的图,是不是很诱人?
本文译自:https://css-tricks.com/comparing-the-new-generation-of-build-tools/
在过去的一年里,出现了一批新的开发工具,它们正在紧跟过去几年主导前端开发的工具,包括 webpack、 Babel、 Rollup、 Parcel、 create-react-app。
不平凡的 2020 年体现在了方方面面,就连 JavaScript 的年度“新秀”也出现了 5 年来首次的变化,这次都有哪些项目上榜呢?
前端的交付基于浏览器,资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,是前端发展中一直探索的难题。
近年来,前端领域迅猛发展,而在技术的不断发展下,开发者们会根据项目的需求和工具更新的功能来判断自己需要使用的工具,也就导致了很多工具和项目虽然发布时间较晚,却拥有极高人气。本文将为大家整理 2020 年前端领域那些备受瞩目的项目,看看你使用的框架排在第几位吧。
最近尝试将bundleless的构建结果直接用到了线上生产环境,因为bundleless只会编译代码,不会打包,因此构建速度极快,同比bundle模式时间缩短了90%以上。得益于大部分浏览器都已经支持了http2和浏览器的es module,对于我们没有强兼容场景的中后台系统,将bundleless构建结果应用于线上是有可能的。本文主要介绍一下,本人在使用bundleless构建工具实践中遇到的问题。
而在Vite之前,还有Snowpack也同样采用了No-Bundler构建方案。那么No-Bundler模式与传统老牌构建工具Webpack孰优孰劣呢?能否实现平滑迁移和完美取代?
大家好,我是 ConardLi,不知不觉中,2021 年已经接近尾声了,不知道在 2021 这一年,你收获了什么?又失去了什么呢?
译者:@Angelo Zuo 原文:https://risingstars.js.org/2020/zh
前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具,再到现在的bundleless基于浏览器原生 ES 模块的 snowpack/vite,前端的模块化/构建工具发展到现在已经快 10 年了。
字节前端是如何基于 ESBuild 的做现代化打包设计? https://mp.weixin.qq.com/s/bS_qwiOIMqFN1sfuPKTUbA
基于 webpack 构建的大型项目开发速度已经非常慢了,前端开发者已经逐渐习惯忍受超过 100 秒的启动时间,超过 30 秒的 reload 时间。即便被寄予厚望的 webpack5 内置了缓存机制也不会得到质的提升。但放到十年前,等待时间是几百毫秒。
时下大热的vue框架又来了新开发环境构建工具——Vite,今天我们一起来了解一下这个新成员。
千呼万唤的全球2020的JS报告终于出来了。顺便附上2020全球CSS报告地址 2020年度全球CSS报告新鲜出炉
千呼万唤的全球2020的JS报告终于出来了。顺便附上2020全球CSS报告地址 2020年度全球CSS报告新鲜出炉[1]
说起前端构建,大家一定首先想到 Webpack,确实它是前端构建的老大哥了,大而全,什么场景都能满足,社区生态爆炸。但是社区里也有许多其他优秀的构建工具,他们或许不如 Webpack 那样“包治百病”,但他们都有一些独特的优势,如果在一些特定的场景你觉得使用 Webpack 太臃肿了,那你或许可以考虑下面的一些工具。
模块化编程在前端领域已非常普遍,应用程序中将各种功能细分成独立的模块(单独文件)进行开发。module bundler 将所有文件串联起来变成了必须。
今天给大家介绍一个非常厉害的前端构建工具——Snowpack。也许你之前听说过前端领域非常多的打包工具,诸如 Webpack、Rollup,或者Parcel,甚至是现在在前端圈大火的 Bundleless 构建工具Vite,但大家也许并没有注意到 Snowpack。
业界主流的开发工具还是以 Webpack 为主,随着项目体积增大,开发阶段一次性将源代码和第三方依赖编译处理打包到一起的耗时会显著增加。在我们团队内部的 monorepo 仓库中,应用项目开发时,为了开发阶段调试方便,通常也会对一些公共库源码一起打包编译,成千上万个模块导致首次 dev server 启动耗时在几分钟甚至十几分钟,严重影响了开发效率与体验。
快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:https://chat.waixingyun.cn
Rollup 设计之初就是面向 ES Module 的,构建出结构扁平,性能出众的类库。
刚开源不到一个月就获得了 19.5k star!看起来马上就会成为 Node.js 和 Deno 的一大竞争对手了!
就跟人都绕不过生老病死一样,一个软件开发者,只要做一个完整的项目,无论如何都绕不过前端。然而,前端的发展太太太太让人眼花缭乱,稍不留神,一大堆新的前端框架就不知怎么地,仿佛从地底下冒出来一般,让人难以择决。
所以 Bun 关注 3 件事:1. 迅速启动;2. 从底层提高性能水平;3. 提供丰富且完整的工具链
esbuild 项目主要目标是: 开辟一个构建工具性能的新时代,创建一个易用的现代打包器。
本文作者在学习了Google Code Review 指南的基础上;总结了长期做CodeReview的好处:提声代码质量、提前发现问题、经验和知识的传递;CodeReview的关注点:功能性、复杂性、代码风格、文档&注释、代码亮点;还指出了CodeReview应该及时;以及注意的礼节,reviewer写得好的地方也应该点赞;
ViteConf 2022 于 10 月 11 - 12 日举行。Vue 和 Vite 的作者尤雨溪发表了名为《How Vite Came to Be》的主题演讲。下面就来回顾一下这场演讲,看看 Vite 是如何诞生的!
一年一度的 Discover the State of JS 2020 results 在前几天新鲜出炉了,每次阅读这份报告都能帮助我快速地了解到 JavaScript 世界在这一年里都发生了哪些事情,同时也给了我一次查漏补缺的机会,让我十分收益。
最近在B乎看到了这么一个问题,能不能通俗地讲 Vite 到底是用来干嘛的,一开始觉得这个问题没什么意思,因为 Vite 这个话题有太多的人讲了。
本周精读的文章是 Comparing the New Generation of Build Tools。
webpack 编译过程都是围绕着这些关键对象展开的,更详细完整的信息,可以参考 Webpack 知识图谱 。
大家好,我是零一。最近在社区看到一个让人惊讶的消息,近20k Star的构建工具库 Snowpack的作者 Fred K.Schott (文中简称Fred)表示已经没有精力去维护snowpack了,其使用量和下载量都开始呈现下降的趋势。Fred也借此回顾了Snowpack的一生,反思、总结,并且借助这些经验投身到另外一个新项目Astro中,而Sonwpack打算交给社区维护。这 … 作者是说不做就不做了吗?
本文由 InfoQ 整理自阿里巴巴淘宝前端开发工程师林伟轩在 QCon+案例研习社的演讲《淘宝店铺 TypeScript 研发规约落地》。
今年最受欢迎的项目是谷歌的zx,可在JavaScript或TypeScript中编写简单的命令行脚本。
距离上次 Pro 发布已经过去了两年,这两年间前端的生态也发生了一些变化, Low-Code 大行其道,Bundleless 也随着 Snowpack,Vite 的发布越来越火热,前端在国际化,权限,数据流和布局方面已经有了最佳实践。 Ant Design Pro 致力于提升中后台的开发体验,在这些领域我们也提出了自己的解决方案。
大家好,我是 ConardLi, 拖了这么久,JS 生态圈最权威的调查报告 state-of-js 终于是出来了 ...
Vite在去年就已经出来了,但我真正的去了解它却是在最近Vue Conf上李奎关于Vite: 下一代web工具的分享。其中他提到的几点吸引到了我。分享的开始,他简要说明了本次分享的关键点:
【编者按】在过去一年中,JavaScript 生态圈的技术框架大放异彩,根据 GitHub 中增加的星星数量排名,JavaScript 领域最受欢迎的项目是 zx、Vite 和 Next.js。开发者越来越看重速度的提升,为构建更好的网站和应用,元框架开始走进大家的视野。许多社区成员都开始从事开发工作,为用户带来更好的体验。今年又将出现哪些表现出色的项目呢?让我们一起来看看吧! 这是「进击的Coder」的第 577 篇技术分享作者:Michael Rambeau编译:郭露来源:CSDN(ID:CSDNnew
Bundle or Bundleless?自 2015 年 ESM 标准发布后,路线之争就开始逐步升温。转眼间,时间已来到 2021 年。如果白酒的车你错过了,那么不妨看看 Bundleless,或许它就是前端圈的下一位「茅台」。
从定位来说两者就是不一样的:webpack core 是一个纯打包工具(对标 Rollup),而 Vite 其实是一个更上层的工具链方案,对标的是 (webpack + 针对 web 的常用配置 + webpack-dev-server)。 webpack core 因为只针对打包不预设场景,所以设计得极其灵活,不局限于针对 web 打包,几乎所有可配置的环节都做成了可配置的。这种极度的灵活性对于一些特定场景依然不可替代。但反过来导致的缺点就是配置项极度复杂,插件机制和内部逻辑晦涩难懂,针对常见的 web 也需要大量的配置。另外大量 loader 插件虽然单独发布却存在各种隐式耦合,很容易配置不当互相影响。对于新手来说,把 webpack 从零开始配到跟 Vite 开箱即用功能对等的程度根本是不可能的任务,所以大部分团队/公司要么用的是基于 webpack 包一层的脚手架(umi, vue-cli),或是专门养一个人称 webpack 配置工程师的角色。 Vite 的选择是缩窄预设场景来降低复杂度。如果预设了 web 的场景,那么大部分常见的 web 构建需求都可以直接做成默认内置。由于内置,可以适当的增加各个环节之间的耦合来进一步降低复杂度;同时浏览器场景下意味着可以利用原生 ESM,更进一步又可以基于原生 ESM 实现理论最优性能的热更新。 换言之 Vite 从一开始就不是冲着对标 webpack 100% 使用场景来的。这是一个目标场景 vs. 复杂度的取舍。有些场景,比如针对 Node 打包,本来就不属于 Vite 的目标场景(这个场景可以直接用 esbuild)。但是在纯 web 这个目标场景下,Vite 可以做到在对标 webpack 栈对等功能的前提下极大的降低配置复杂度和提升开发体验。 有些人的态度是这都是不痛不痒的东西 —— 怎么说呢,反正习惯了 Vite 的热更新速度之后你给我钱我也不想再用 webpack。有些人对 Vite 的怀疑其实不是 Vite 本身的问题 —— 核心还是在于已经稳定运行的 webpack 项目要换构建工具是个潜在成本很大的事情,没人愿意背锅而已。比起背锅,还不如多等几秒热更新(唉,也是可以理解的)。
简单来讲,这些站点都做了一件事情:将 npm 仓库上的包转化成支持 esmodule 的版本并通过 url 来进行分发。
以下是对前端各位大佬2021总结的一个汇总总结。希望可以看到一些前端行业的动向,排布。帮助团队和自身制定未来的规划。内容分为四个部分:
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动。
领取专属 10元无门槛券
手把手带您无忧上云