JS `Bundless` `Development` (无打包开发)：Vite / Snowpack 的原理

admin
Wed, 16 Jul 2025 18:55:55 +0000
Javascript, bundless, development, js

嘿，大家好！今天咱们来聊聊前端开发里的一个“新”玩意儿，其实也不算新了，已经流行一段时间了，那就是“Bundless Development”，也就是“无打包开发”。主要说说 Vite 和 Snowpack 这两个家伙，看看它们是怎么做到“不打包”也能让你的代码飞起来的。 开场白：告别漫长的等待 相信大家都有过这样的经历：改了一行代码，保存，然后…漫长的等待，看着打包工具吭哧吭哧地把整个项目重新打包一遍。这种感觉就像明明只是想换个灯泡，结果要把整个房子重新装修一遍一样，效率低得令人发指。 传统的打包工具，比如 Webpack，Parcel，它们的工作方式是“先打包，后运行”。它们会分析你的代码，把所有的依赖关系整理好，然后把所有的模块打包成一个或多个文件，最后浏览器再加载这些文件。这种方式在项目小的时候还好，一旦项目变大，打包的时间就会变得非常长，严重影响开发效率。 而 Vite 和 Snowpack 就不一样了，它们采用了“按需编译”的策略，也就是“先运行，后编译”。它们不会在一开始就把所有的代码都打包好，而是当你需要某个模块的时候，才去编译它。这种方式可以大大减少打包的时间，让你的 …

继续阅读“JS `Bundless` `Development` (无打包开发)：Vite / Snowpack 的原理”

The post JS `Bundless` `Development` (无打包开发)：Vite / Snowpack 的原理 first appeared on 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座.

嘿，大家好！今天咱们来聊聊前端开发里的一个“新”玩意儿，其实也不算新了，已经流行一段时间了，那就是“Bundless Development”，也就是“无打包开发”。主要说说 Vite 和 Snowpack 这两个家伙，看看它们是怎么做到“不打包”也能让你的代码飞起来的。

开场白：告别漫长的等待

相信大家都有过这样的经历：改了一行代码，保存，然后…漫长的等待，看着打包工具吭哧吭哧地把整个项目重新打包一遍。这种感觉就像明明只是想换个灯泡，结果要把整个房子重新装修一遍一样，效率低得令人发指。

传统的打包工具，比如 Webpack，Parcel，它们的工作方式是“先打包，后运行”。它们会分析你的代码，把所有的依赖关系整理好，然后把所有的模块打包成一个或多个文件，最后浏览器再加载这些文件。这种方式在项目小的时候还好，一旦项目变大，打包的时间就会变得非常长，严重影响开发效率。

而 Vite 和 Snowpack 就不一样了，它们采用了“按需编译”的策略，也就是“先运行，后编译”。它们不会在一开始就把所有的代码都打包好，而是当你需要某个模块的时候，才去编译它。这种方式可以大大减少打包的时间，让你的开发体验更加流畅。

第一章：传统打包工具的困境

要理解 Vite 和 Snowpack 的优势，我们首先要了解传统打包工具的瓶颈在哪里。

特性 | 传统打包工具 (Webpack, Parcel) | Vite / Snowpack
打包方式 | 先打包，后运行 | 先运行，后编译
启动速度 | 慢 | 快
热更新速度 | 慢 | 快
适用场景 | 大型项目，生产环境 | 中小型项目，开发环境

启动速度慢： 每次启动项目，都需要把所有的代码都打包一遍，这个过程非常耗时。

热更新速度慢： 每次修改代码，都需要重新打包，即使只修改了一行代码，也需要等待很长时间才能看到效果。

复杂度高： 配置复杂，学习成本高。Webpack 的配置简直就是一门玄学，各种 loader、plugin 让人眼花缭乱。

第二章：Vite：ESM 的妙用

Vite 的核心思想是利用浏览器原生的 ESM (ES Modules) 能力。ESM 是 JavaScript 的官方模块化标准，它允许我们在浏览器中直接使用 import 和 export 语法来加载和导出模块。

2.1 ESM 的基本用法

先来看个例子：

// moduleA.js
export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// moduleB.js
import { sayHello } from './moduleA.js';

sayHello('Vite'); // 输出：Hello, Vite!

在浏览器中，我们可以这样加载 moduleB.js：




Vite Example






注意 script 标签的 type="module" 属性，它告诉浏览器这是一个 ESM 模块。

2.2 Vite 的工作原理

Vite 利用 ESM 的特性，将项目中的模块分成两类：

依赖 (Dependencies)： 指的是那些不会经常变动的第三方库，比如 React、Vue 等。

源码 (Source Code)： 指的是我们自己编写的代码，这些代码会经常变动。

对于依赖，Vite 会使用 esbuild 进行预构建 (pre-bundle)，将它们打包成 ESM 格式的文件。esbuild 是一个用 Go 语言编写的打包工具，它的速度非常快，比 Webpack 快 10-100 倍。

对于源码，Vite 会直接使用 ESM 的方式加载它们。当你修改某个模块的代码时，Vite 只会重新编译这个模块，然后通过 HMR (Hot Module Replacement) 的方式更新浏览器中的代码，而不需要重新加载整个页面。

2.3 代码示例：Vite 的基本用法

1. 安装 Vite：

npm create vite@latest my-vite-project --template react
cd my-vite-project
npm install
npm run dev

2. 目录结构：

my-vite-project/
├── index.html
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── ...
├── package.json
├── vite.config.js
└── ...

3. main.jsx：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

4. App.jsx：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (









Vite + React

setCount((count) => count + 1)}>
          count is {count}


Edit src/App.jsx and save to test HMR



        Click on the Vite and React logos to learn more


  )
}

export default App

5. vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

运行 npm run dev 命令后，Vite 会启动一个开发服务器，然后你就可以在浏览器中访问你的项目了。当你修改 App.jsx 的代码时，Vite 会自动更新浏览器中的代码，而不需要重新加载整个页面。

第三章：Snowpack：拥抱原生 ESM

Snowpack 和 Vite 的思想类似，也是利用浏览器原生的 ESM 能力来实现无打包开发。但 Snowpack 的实现方式和 Vite 有一些不同。

3.1 Snowpack 的工作原理

Snowpack 会将你的项目中的每个模块都编译成 ESM 格式的文件，然后将这些文件存储在一个名为 web_modules 的目录中。当你需要某个模块的时候，Snowpack 会直接从 web_modules 目录中加载它，而不需要重新编译。

Snowpack 的这种方式可以让你在开发环境中完全摆脱打包工具，只需要使用浏览器原生的 ESM 能力就可以运行你的代码。

3.2 代码示例：Snowpack 的基本用法

1. 安装 Snowpack：

npm install --save-dev snowpack

2. 配置 Snowpack：

在 package.json 文件中添加以下配置：

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  }
}

3. 目录结构：

my-snowpack-project/
├── index.html
├── src/
│   ├── index.js
│   └── ...
├── package.json
├── snowpack.config.js
└── ...

4. index.html：




Snowpack Example


Hello, Snowpack!




5. src/index.js：

import _ from 'lodash';

console.log(_.join(['Hello', 'Snowpack'], ' '));

6. snowpack.config.js：

module.exports = {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-dotenv',
    '@snowpack/plugin-optimize'
  ],
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

运行 npm run start 命令后，Snowpack 会启动一个开发服务器，然后你就可以在浏览器中访问你的项目了。

第四章：Vite vs Snowpack：异同点分析

Vite 和 Snowpack 都是优秀的无打包开发工具，它们都利用了浏览器原生的 ESM 能力来提高开发效率。但它们在实现方式和适用场景上有一些不同。

特性 | Vite | Snowpack
核心依赖 | esbuild (预构建) | 无，依赖浏览器原生 ESM
打包方式 | 按需编译，依赖预构建 | 预编译所有模块到 web_modules
热更新 | HMR | HMR
插件机制 | 基于 Rollup 插件 | Snowpack 插件
适用场景 | 中大型项目，需要快速启动和热更新 | 小型项目，追求极致的开发体验
学习成本 | 相对较低 | 相对较低
社区生态 | 更加活跃，插件更丰富 | 社区相对较小，但也在快速发展

核心依赖： Vite 依赖 esbuild 进行预构建，而 Snowpack 则完全依赖浏览器原生的 ESM 能力。

打包方式： Vite 采用按需编译的策略，只编译当前需要的模块，而 Snowpack 则会将所有的模块都预编译到 web_modules 目录中。

插件机制： Vite 的插件机制基于 Rollup 插件，可以利用 Rollup 社区的资源，而 Snowpack 则有自己的插件机制。

适用场景： Vite 更适合中大型项目，可以提供更快的启动速度和热更新速度，而 Snowpack 更适合小型项目，可以提供更极致的开发体验。

第五章：无打包开发的未来

无打包开发是前端开发的一个趋势，它可以大大提高开发效率，让开发者更加专注于代码本身，而不需要花费大量的时间在打包工具的配置上。

随着浏览器对 ESM 的支持越来越好，无打包开发将会越来越普及。未来，我们可能会看到更多的无打包开发工具出现，它们会提供更加强大的功能和更加便捷的使用方式。

总结：选择适合你的工具

Vite 和 Snowpack 都是优秀的无打包开发工具，它们各有优缺点，你可以根据自己的项目需求和个人喜好来选择适合你的工具。

如果你正在开发一个中大型项目，并且需要快速的启动速度和热更新速度，那么 Vite 可能是更好的选择。如果你正在开发一个小型项目，并且追求极致的开发体验，那么 Snowpack 可能是更好的选择。

无论你选择哪个工具，都可以让你摆脱漫长的打包等待，享受更加流畅的开发体验。

好了，今天的讲座就到这里。希望大家有所收获，下次再见！