写点什么

再也不需要打包器!Snowpack 2.0 发布,让打包速度快 10 倍的神奇工具

2020 年 5 月 29 日

再也不需要打包器!Snowpack 2.0发布,让打包速度快10倍的神奇工具

在发布了超过 40 个 Beta 版本和候选版本之后,我们很高兴地宣布,Snowpack 2.0 今天正式发布了。


Snowpack 2.0 是一套为现代 Web 打造的构建系统。其特性包括:


  • 启动时间不到 50ms,在大型项目中速度也不会打折扣。

  • 无打包开发与生产构建打包。

  • 内置对 TypeScript、JSX 和 CSS 模块等特性的支持。

  • 可与 React、Preact、Vue、Svelte 和所有你喜欢的库一起使用。

  • Create Snowpack App(CSA)入门模板


# install with npmnpm install --save-dev snowpack# install with yarnyarn add --dev snowpack
复制代码


迈向 Snowpack 2.0 之路


Snowpack 1.0 是针对一个简单任务而设计的:安装 npm 软件包以直接在浏览器中运行。它背后的理念是,JavaScript 包是在开发过程中唯一 需要 使用打包器(bundler)的东西;只要能去掉这个要求,不再需要打包器,我们就能加快所有人的 Web 开发速度。


结果 Snowpack 大获成功。成千上万的开发人员开始使用 Snowpack 来安装他们的依赖项,简化了构建网站时使用的工具链。一夜之间,一种速度更快,更轻量级的开发环境呈现在人们面前。


Snowpack 2.0 则是为了这个 Web 开发的新时代而设计的构建系统。Snowpack 利用原生 ES 模块(ESM)支持,将构建好的文件直接提供给浏览器,这样你的开发环境就不再需要打包器了。它不仅是一种速度更快的工具,更是一种全新的 Web 构建系统和构建方法。


O(1) 构建系统的兴起



打包(bundling)是一种复杂度为 O(n) 的过程。当你更改一个文件时,你不能只重建这个文件。你往往需要针对多个相关文件,重建并重新打包应用程序中的一整块内容,这样才能正确完成更改过程。


Snowpack 则是一个复杂度为 O(1) 的构建系统。这个术语最初是由 Ives van Hoorne 提出的,它完美地体现了我们的 Web 开发未来愿景。用 Snowpack 构建的每个文件都可以表示为一个函数:build(file) => result。在开发过程中更改某个文件时,只需重建这一个文件就够了。


与传统的打包开发方法相比,它有诸多优点:


  • O(1) 构建速度更快。

  • O(1) 构建是可预测的。

  • O(1) 构建易于推理和配置。

  • 项目规模不会影响开发期间的构建时间。

  • 单个文件能更好地缓存。


最后一点很关键:每个构建的文件都会单独缓存,可随时重用。如果你从不更改某个文件,那就永远用不着重新构建它了


dev:更快的开发环境



运行 snowpack dev 就可以启动新的 Web 开发环境了,你会注意到的第一件事,就是 O(1) 构建工具链的速度竟然如此之快。Snowpack 的启动时间不到 50 毫秒。这里的单位没写错:是不超过 50 毫秒。


因为无需启动打包工作,所以服务器可以立即启动。在首次加载页面时,Snowpack 会构建你请求的第一批文件,然后将它们缓存起来以备将来使用。就算你的项目中包含一百万个不同的文件,Snowpack 也只会构建加载当前页面所需的那些文件而已。这就是为什么 Snowpack 能够一直提供飞快的运行速度。


snowpack dev 包括一个开箱即用的开发服务器,和一系列熟悉的功能:


  • TypeScript 支持

  • JSX 支持

  • 热模块更换(HMR)

  • 导入 CSS 和 CSS 模块

  • 导入图像和其他资产

  • 自定义路由

  • 代理请求


自定义构建


使用 Snowpack 内置的构建脚本,你就可以连接自己喜欢的那些构建工具。


在 Snowpack 中,你可以将每个构建表示为一个线性的"输入 ->构建 ->输出"工作流程。这样一来,Snowpack 便可以将文件纳入任何现有的 UNIX-y CLI 工具的管道,或者从管道中提取出来,而无需专门的插件生态系统支持。


// snowpack.config.json{  "scripts": {    // Pipe every "*.css" file through the PostCSS CLI    // stdin (source file) > postcss > stdout (build output)    "build:css": "postcss",  }}
复制代码


如果你用过 package.json 的“scripts”配置,应该会很熟悉这种格式。我们很喜欢这种直接使用 CLI,而无需非必要插件系统的简单方法。我们希望这种模式能提供与之类似的直观设计。


如果你想更好地掌控自己的构建(或者想编写自己的构建工具),Snowpack 还支持第三方 JavaScript 插件。可以查看我们的文档以了解有关自定义构建的更多信息


bulid:为生产环境打包



需要明确的是,Snowpack 并不反对生产环境中的打包。实际上我们推荐这种方法。在打包过程中的文件缩小、压缩、移除无用代码和网络优化等操作,都能让你的站点运行得更快,给用户带来更好的体验;这也是所有构建工具的终极目标。


Snowpack 将打包视为一种只用在最后一步,且只针对生产环境的构建优化过程。将打包放在最后一步后,你就不会将构建逻辑和打包逻辑混在同一个巨大的配置文件中了。相比之下,你的打包器可以获取已构建好的文件,并专注于它最擅长的工作:打包。


Snowpack 维护了一套针对 Webpack 和 Parcel 的官方插件。你可以选择自己喜欢的那一款,然后运行 snowpack build 来构建生产站点。


// snowpack.config.json{  // Optimize your production builds with Webpack  "plugins": [["@snowpack/plugin-webpack", {/* ... */}]]}
复制代码


如果你不想使用打包器也是可以的。Snowpack 的默认构建将为你提供一个没有打包过的网站,它运行起来也不会有任何问题。这就是 Snowpack 项目从一开始就坚持的理念:你想用打包器的时候才会用它,不想用的时候就可以不用,没有硬性要求


现在就尝试 Snowpack


我们很高兴能和大家分享所有这些内容,现在就下载 Snowpack,体验 Web 开发的未来吧。


npm i snowpack@latest --save-dev
复制代码


如果你已经装过 Snowpack 应用程序,那么 Snowpack 2.0 会引导你更新那些过时的配置。Snowpack 原来的软件包安装程序仍然可以正常运行,而且现在有了新的 dev 和 build 命令,Snowpack 甚至可以为你管理 Web 软件包。


请查看我们的文档站点以了解更多信息


https://www.snowpack.dev/


创建 Snowpack 应用


入门 Snowpack 的最简单方法是使用 Create Snowpack App(CSA)模板。CSA 使用预先配置的,由 Snowpack 驱动的开发环境为你自动初始化一个入门应用程序。


npx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]
复制代码


Snowpack 的模板包括:


  • @snowpack/app-template-blank

  • @snowpack/app-template-react

  • @snowpack/app-template-react-typescript

  • @snowpack/app-template-preact

  • @snowpack/app-template-svelte

  • @snowpack/app-template-vue

  • @snowpack/app-template-lit-element

  • @snowpack/app-template-11ty


这里可以查看 snowpack 社区提供的模板:


https://github.com/pikapkg/create-snowpack-app


感谢超过 80 位贡献者为新版做出的努力,编程愉快!


原文链接:


https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/


2020 年 5 月 29 日 00:023444
用户头像
蔡芳芳 InfoQ高级编辑

发布了 508 篇内容, 共 232.6 次阅读, 收获喜欢 1420 次。

关注

评论 1 条评论

发布
用户头像
拉下来试了下,npm包都无法加载是什么情况...
`import dayjs from "dayjs"`
直接就整个崩溃了
2020 年 06 月 01 日 08:45
回复
没有更多了
发现更多内容

架构师训练营第七周作业-性能测试

sunnywhy

如何挑选编程笔记本 | 数码产品

chaozh

Ubuntu 20.04 上安装和配置 VNC

酱紫的小白兔

深入理解 JS 中的 this

Verlime

Java 前端

深入 Java Web 技术内幕(二)浅析DNS域名解析过程

独钓寒江雪

DNS 域名解析

腾讯的背水一战还是奋力一搏? | 互联网

chaozh

彻底弄懂C++11右值引用 | 技术总结

chaozh

c++

【干货分享】通过命令操作来学习Git

独钓寒江雪

git git入门

JVM 类加载机制

Alex🐒

JVM 深入理解JVM

深入理解 JS 中的变量提升

Verlime

Java 前端

神国统治者 | 中国古神话

chaozh

JVM 垃圾回收机制

Alex🐒

JVM 深入理解JVM

架构师训练营 - 命题作业 第 7 周

铁血杰克

压测工具如何选择?

elfkingw

架构师训练营第7周总结

时来运转

JVM 运行时数据区

Alex🐒

JVM 深入理解JVM

JVM 垃圾回收器 G1

Alex🐒

JVM 深入理解JVM GC

深入Java Web技术内幕(一)浅析Web请求过程

独钓寒江雪

Java

女娲造物与补天 | 中国古神话

chaozh

人民自己创造的节日 | 经济

chaozh

深入理解 JS 参数传递

Verlime

Java 前端

JVM 垃圾回收器 CMS

Alex🐒

JVM 深入理解JVM GC

JVM 对象内存布局

Alex🐒

JVM 深入理解JVM

优雅地利用c++编程从1乘到20 | 技术总结

chaozh

c++

程序员面试必备战衣 | T恤衫 - 程序员穿搭

chaozh

GEEK

Presto性能调优的五大技巧

华为云开发者社区

大数据 数据 内存 存储 华为云

Spring Cloud微服务技术栈:搭建高可用Eureka Server、服务注册与发现

独钓寒江雪

Spring Cloud

Flask 中的 Sessions

Leetao

Python flask Web框架

创世 | 中国古神话

chaozh

神话

每个现代人都应该知道的包豪斯| 艺术

chaozh

架构师训练营第7周作业

时来运转

NLP领域的2020年大事记及2021展望

NLP领域的2020年大事记及2021展望

再也不需要打包器!Snowpack 2.0发布,让打包速度快10倍的神奇工具-InfoQ