大家好，我是三元同学。
今天给大家介绍一个非常厉害的前端构建工具——Snowpack。也许你之前听说过前端领域非常多的打包工具，诸如 Webpack、Rollup，或者Parcel，甚至是现在在前端圈大火的 Bundleless 构建工具Vite，但大家也许并没有注意到 Snowpack。
其实它在 2019 年 2 月就在开源社区诞生了，可以说是业界最早提出并实现的 Bundleless 方案，如今在社区已经有了不小的影响力，Github 上的 star 已经超过了两万，而尤大本人也承认早期 Vite 的设计也确实受到了 Snowpack 的启发。不管怎么说，Snowpack 本身是一个非常优秀的方案，背后的开发团队是一支非常值得 respect 的团队，我想很有必要将这个方案分享给大家。
时代先锋队——Pika
Snowpack 的开发团队名为Pika，团队的技术紧跟时代的最前沿，在开发 Snowpack 这个新时代前端构建工具的同时，也率先提出了Skypack这种造福大众的针对 ESM 格式第三方库的 CDN 服务(后续再跟大家详细介绍这个服务到底有多吸引人)。
他们有一个使命: 让 Web 项目构建速度加快 90%。
作为走在时代前沿的他们，始终贯穿着一句研发宗旨:
- You should be able to use a bundler because you want to, and not because you need to.
换句话说，在现在的 Web 开发时代，打包不再是必需的选项，而只是一种优化的手段，不用打包也能运行你的应用。现代 Web 构建要变天了，未来即将进入一个 Bundleless(顾名思义，更少的打包，更快的构建速度)的时代，Web 领域在经历之前一系列的工程化改革之后，现在即将又要迎来一场翻天覆地的革新浪潮，而 Snowpack 之父——Pika 团队就是跨时代的弄潮儿，Snowpack 就是 Pika 团队创造新时代而打响的第一枪!
Why?
Snowpack 为什么会诞生?Web 构建为什么会进入 Bundleless 的时代?为什么 Pika 团队宁愿倾其所有去改变当下 Web 项目的构建现状?在真正介绍 Snowpack 之前，这些问题，必须得弄清楚。
在很久很久以前，开发前端网页，似乎并没有现在这么繁杂的工具链和框架，仅仅写一些原生的 HTML 代码、CSS 和一些 JavaScript 代码，那个时候怎么启动项目?直接打开 HTML 文件!我改动了代码怎么看到更新?直接刷新网页!一切看上去都是那么的丝滑，所见即所得，可以说那个时候的前端，足够开门见山，足够简单粗暴，简单得甚至让人有些怀念。
直到后来，随着前端的逻辑越来越复杂，对模块化的需求越来越强烈，逐渐出现了 CommonJS(2009 年)、AMD(2010 年)、UMD(2011 年)这些模块规范，底层的规范出现并稳定之后必然会有上层的工具来实现，由此出现了一系列的工程化方案：
- 模块加载器，比如 SeaJS
- 包管理器，比如 npm
- 打包器，比如 Browserify、Gulp、Webpack
更重要的是，09 的时候 Ryan Dahl 写出了一个叫 Node.js 的东西，给 JS 带来了全新的可能，以前 Java、C++ 能写的工具，用 JS 照样能写了! 也就是从这个时候开始，前端开始变复杂了，各种工具链开始乱花渐欲迷人眼，尤其是在 2015 年 ESModule 标准的诞生，再次将工程化方案之争推上风口浪尖，最后的胜出者很明显了，就是在座各位如今几乎天天能遇到的Webpack、Babel，这两个东西，甚至已经成为了如今前端工程化的代名词了。
Babel 不用多说，是鼎鼎有名的 JavaScript 编译器，在让人眼花缭乱的语法标准中，它能够将灵活地一份 JS 代码从一种语法标准转换到另一种语法标准。
Webpack 是干什么的呢?它给自己的定位其实很简单，就是一个模块打包器。
它的理念是：万物皆模块。
不管代码里面依赖关系多复杂，按照它的模块导入导出语法来写，写完之后把入口扔给它，它给你理清所有的依赖关系，最后打包到一起，给你一份产物，甭管这份产物你能不能看得懂，你大可以放心，浏览器看得懂，并且代码性能和安全性也都还不错。
当然，作为打包器，Rollup包括Parcel现在也都是很亮眼的存在，不过在 Webpack 强大的生态和业界落地基础面前，二位就相形见绌了。
但总体来说，对于这样的打包器而言，一定是有潜在的性能风险的，因为它的构建时间是和项目的整体规模成正比的，也就是说，项目规模的变大难以避免构建时长不断增加，现在的前端项目可以说要多复杂有多复杂，你可以尽情地想象打包器的这种性质带来的后果。
果然，这一天还是来了。
五年前，我用 Webpack 打包，启动还挺快的。
五年后，我还是在用 Webpack 打包，团队多了 20 个人，代码多了 20 万行，现在启动一次要 10 分钟!代码改动一次，看到结果更新要等 30000 ms!