大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

高级前端‬进阶

前言

Vite 和 Snowpack 都是非常优秀的前端构建工具，旨在提高生产力和改善开发人员体验。在本文中，我们将详细比较 Vite 与 Snowpack 以确定如何以及何时使用这两个构建工具。话不多说，直接开始。

1.Vite vs. Snowpack

1.1 Vite是什么

Vite是由 Vue.js 的创建者 Evan You 推出的下一代前端构建工具。它是官方 Vue CLI 的替代品，速度非常快。Vite利用原生 ES 模块并使用 Rollup 处理开发和打包工作。从功能上讲，它的工作方式类似于预配置的 webpack 和 webpack-dev-server，但在速度方面具有无可比拟的优势。

1.2 Snowpack是什么

Snowpack 是一种自称“快如闪电”的前端构建工具，专为现代网络设计。 Snowpack 是开发工作流程中更复杂打包器（如 webpack 或 Parcel）的替代品。与 Vite 类似，它利用 JavaScript 的原生模块系统（称为 ESM）来避免不必要的工作并保持快速，同时做到构建速度与项目体积无关。

Vite 和 Snowpack 都是快速发展的前端构建工具，专注于通过尽可能高效地构建前端应用程序来改善开发人员的体验。在接下来的章节中，将深入探讨 Vite 和 Snowpack 的更多功能以及如何在开发过程中使用。

2.脚手架

2.1 Vite

使用 CLI @vite/create-app 构建一个 Vue 和 Vite 项目。为此，可以在终端中运行以下任一命令：

// 使用 npm
npm init @vitejs/app my-vite-app --template vue
// 使用 yarn
yarn create @vitejs/app my-vite-app --template vue

可以使用以下支持的模板之一启动 Vite 应用程序：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts

完成后，cd 到项目目录，安装依赖项，然后启动开发服务器：

// 使用 npm
npm run dev
// 使用 yarn
yarn dev

请注意，尽管在示例中使用 Vite 和 Vue.js，但 Vite 也可以在 React、Preact 或 Vanilla JavaScript 应用程序中使用。

通过在项目根目录的 vite.config.js 或 vite.config.ts 文件中添加更多选项，可以扩展和配置 Vite，从而扩展默认配置。

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
  // Load env file based on `mode` in the current working directory.
  // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite config
    define: {
      __APP_ENV__: env.APP_ENV,
    },
  }

请注意，Vite 默认不加载 .env 文件，因为要加载的文件只能在执行 Vite 配置后确定，例如，root 和 envDir 选项会影响加载行为。但是，如果需要，可以使用导出的 loadEnv 帮助程序加载特定的 .env 文件，比如上面的示例。

2.2 Snowpack

开始使用 Snowpack 的最简单方法是使用 Create Snowpack App (CSA)。借助 CSA 工具，可以使用 CSA 官方应用程序模板来配置 Snowpack 构建应用程序：

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

与vite类似，也可以通过配置snowpack.config.mjs来进一步扩展打包配置。比如下面的插件例子来扩展snowpack：

// snowpack.config.mjs
// Example: enable plugins both simple and expanded
export default {
  plugins: [
    // Simple format: no options needed
    'plugin-1',
    // Expanded format: allows you to pass options to the plugin
    ['plugin-2', {'plugin-option': false}],
  ];
}

3.不同工具特征对比

Vite 和 Snowpack 都拥有很优秀的功能，这些功能会在未来继续构建和改进。本节将继续讨论这些打包 JavaScript 工具的一些相似和不同的特性。

3.1 Vite特征

HMR

Vite 提供了一个 HMR API， HMR 在应用程序运行时交换、添加或删除模块，无需完全重新加载。这可以显著加快开发过程，因为在对应用程序进行更改时会保留应用程序状态。如果对任何文件进行更改，会注意到更改的反映速度比普通 Vue 或 React 应用程序快得多。

export const count = 1
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule) {
      // newModule is undefined when SyntaxError happened
      console.log('updated: count is now ', newModule.count)
    }
  })
}

TypeScript支持

Vite 支持开箱即用的 .ts 文件，它使用名为 esbuild 的极其快速的 JavaScript 打包器将 TypeScript 代码转换为 JavaScript。

esbuild 是由Go 编写一个快速的 JavaScript 打包器，主要目标是带来构建工具性能的提升，并在此过程中创建易于使用的现代打包器。

npm 依赖解析

支持本机 ES 导入，不支持裸模块导入，例如：

import { createApp } from 'vue'

这样的导入会在浏览器中抛出错误，因为它不是 node_modules 文件夹中包位置的相对路径。

Vite 在提供的所有 JavaScript 文件中检测到此类裸模块导入，并将它们重写为解析路径以反映包在 node_modules 文件夹中的位置，以便浏览器可以正确处理它们。

配置

要在 Vite 中扩展项目的配置，请扩展项目根目录下 vite.config.js 或 vite.config.ts 文件位置中的默认配置选项。

export default defineConfig({
  optimizeDeps: {
    include: ['linked-dep'],
  },
  build: {
    commonjsOptions: {
      include: [/linked-dep/, /node_modules/],
    },
  },
})

文件支持

Vite 开箱即用地支持 Vue 3 单文件组件、Vue 3 JSX 组件和 Vue 2 组件。它还支持 JSX 文件（.jsx、.tsx）、CSS 文件导入、PostCSS、CSS 模块和 CSS 预处理器，如 Sass、LESS 和 Stylus。

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

3.2 Snowpack特性

即时启动

Snowpack 的非打包开发服务器启动时间为 50 毫秒或更短，并且即使项目规模扩大也能保持快速。

一次构建，永久缓存

印象最深的功能之一是 Snowpack 在一次构建后缓存文件的能力。这是通过浏览器中 JavaScript 的本机模块系统实现的。

支持打包的cacheDirPath、cache等扩展配置来提升缓存。

HMR

与 Vite 类似，Snowpack 提供了一个 HMR API。在构建 Snowpack 支持的应用程序时，对文件所做的更改会立即反映在浏览器上。

Snowpack 是通过 esm-hmr 规范实现 HMR，这是一个基于 ESM 的热模块更换 (HMR) 的尝试标准。

// HMR Code Snippet Example
if (undefined /* [snowpack] import.meta.hot */ ) {
  undefined /* [snowpack] import.meta.hot */ .accept(({module}) => {
    // Accept the module, apply it into your application.
  });
}

优化生产

Snowpack 具有由 esbuild 提供支持的内置优化管道。 Snowpack 官方文档还建议使用 @snowpack/plugin-webpack 插件优化 Snowpack 支持的应用程序。

// snowpack.config.mjs
export default {
  plugins: [
    [
      '@snowpack/plugin-webpack',
      {
        extendConfig: (config) => {
          config.plugins.push(/* ... */);
          return config;
        },
      },
    ],
  ],
};

4.构建时间和服务器启动时间

可以在 300 毫秒内在 Vite 中启动开发服务器，因为不需要打包或编译。相反，当打开 Vite 应用程序时，将从服务器获得 index.html。然后浏览器将读取 index.html 并知道如何解析 Native-ES-Module 代码。

与 Vite 一样，Snowpack 的构建时间非常快，因为它在开发过程中提供未打包的文件。因此，Snowpack 中的开发服务器可以在 50 毫秒或更短的时间内启动。

使用 Snowpack，项目中的每个文件都可以解释为函数，其中输入是文件的内容，输出是它的缓存版本。由于根本没有进行任何打包，因此本地开发服务器会立即启动，并且只处理给定时间点所需的文件。这意味着即使的项目变得非常大，启动时间的影响也降低到最低。

5.生产部署

Vite 使用 Rollup 进行生产打包，同时因为是基于 ESM 的，所以可以生产更小的 bundle。 Vite 0.16.4 及更高版本支持异步块和 https 模式的自动 CSS 代码拆分，这两者都可以提高生产构建的性能。

要在 Snowpack 中将站点构建为 Web 原生 JS、CSS 和 HTML 文件，可以使用 snowpack build。这种“非打包式”部署对于小型站点来说已经足够了，但许多开发人员更愿意优化和打包最终站点以提高生产性能。

Snowpack 还可以在最终构建上运行各种优化以处理遗留浏览器支持，包括：代码压缩、代码拆分、tree shaking、死代码消除、预加载、打包等。

6.社区和生态

Vite

尽管 Vite 的第 1 版是在 2020 年 10 月才发布的，但 Vite.js 团队仍在不断地进行改进（例如，最近在 2021 年 1 月，Vite 现已支持全局导入）。

迄今为止，已知有超过 945k 个存储库在 Vite 上运行，超过 745 名开发人员为该存储库做出了贡献。

Snowpack

Snowpack 已经存在了一段时间，并且有超过 403 名开发人员为其在 GitHub 上的存储库做出贡献。已知还有近 4,700 个存储库在 Snowpack 上运行。

有趣的是，尽管Vite是新来者，但 Vite 的采用率比 Snowpack 增长更快。下面是Vite和Snowpack在过去一年的下载量数据对比。

下图是Vite和Snowpack的Github数据对比。从Github的star来说，Vite已经达到了惊人的53K，而snowpack只有19k，而且两者项目创建的时间都是3年前。

总体来说，snowpack虽然是一个很优秀的打包框架，但是和后起之秀Vite相比还有一定的差距，几乎是“未火已衰”的状态。因此，从打包框架的采用率来看，还是非常建议大家尝试Vite，或者使用Vite来替代snowpack。

6.学习曲线

Vite 和 Snowpack 都很容易上手，因为它们都有一个 CLI，可用于搭建一个带有已配置包的新项目。因此，这两种构建工具的学习曲线都相当低，尤其是与 webpack 等 JavaScript 打包器相比（尽管webpack可能具有更多功能）。

7.结论

Vite 和 Snowpack 都拥有令人难以置信的打包速度，在一定程度上都是通过使用无打包开发环境实现的。

虽然很难预测 web 开发的未来，但可以肯定地说，Vite 和 Snowpack 都是可以尝试的方案！大家打包项目用的是Vite还是SnowPack呢？当然，因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了大量优秀文档以供学习。

参考资料

https://blog.logrocket.com/vite-vs-snowpack-a-comparison-of-frontend-build-tools/

https://blog.sessionstack.com/understanding-snowpack-the-next-generation-javascript-bundler-c541a3efe54d

https://github.com/FredKSchott/snowpack/tree/main/plugins/plugin-webpack

https://www.snowpack.dev/

Vite大火！Snowpack未火已衰！

前言