作为一名前端工程师，在使用webpack进行开发调试的时候，每一次的command+s(ctrl+s)都是一次痛苦的经历，编译快则3-4s（很少见），慢则10s甚至30s+（居多，手动┓( ´∀` )┏）。编译过程中要是稍一走神，那么想要再次全身心投入到编码之中，maybe需要15分钟甚至更多了吧。

前几天，无意中在公众号上看到了一个全新的前端构建工具Snowpack，号称50ms即可打包完成，看到你所修改的内容，让人眼前一亮，甚是惊喜。

初识Snowpack

Snowpack是一个基于ESM（ES模块化）思想的构建工具。它通过使用可直接在浏览器端运行的模块化JS，来省去开发过程中不必要的打包操作。每一次的代码修改都能够在浏览器上立即看到修改的内容，而不需要等待长时间的打包构建。让开发者更专注于开发过程。

特性

Snowpack的特性包括:

1、开发环境的启动时间不超过50ms

2、代码的修改能够在浏览器上立即展现

3、集成了常用的打包模块

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

5、可与React、Preact、Vue、Svelte和所有你喜欢的框架/库一起使用

浏览器支持

Snowpack是基于ESM思想的构建工具，因此只要是支持ESM的现代浏览器均支持。

简单上手

光说不练假把式。我们用一个实际的例子，来展现Snowpack的神奇之处。

环境依赖：Node 10 +

项目框架：Vue

创建Snowpack App（CSA）

npx create-snowpack-app new-dir  --template @snowpack/app-template-vue

构建并启动

npm start
#snowpack dev

启动时间只需要3ms！没错，不用惊讶！

生产环境构建

npm run build
#snowpack build

依赖模块->web_modules。每一个依赖模块，都将是一个单独的ES模块，并放置在web_modules文件夹下。

展望

Snowpack优势

能够有效的减少打包的时间成本，代码的修改能够立即呈现在浏览器上，使开发人员更专注于代码编写。使用ESM方式编写，相当于是纯JavaScript语言，有利于代码的移植以及引用的模块和源码的相互独立。

Snowpack劣势

相对于Webpack等成熟的构建工具，依旧缺少较完善的包支持。对于一些CSS、images的资源处理不够友好，需要较多的手动处理操作。因为Snowpack是ESM的方式编写构建，所以当一个项目依赖的包过多时，会造成请求过多、网络堵塞。