webpack与vite的原理和比较

webpack与vite的原理和比较

期期 9 2024-02-26

Webpack和Vite的原理和异同

简介

前端开发中，Webpack和Vite作为两种重要的构建工具，在项目开发中扮演着至关重要的角色。Webpack作为前端领域最流行的构建工具之一，被广泛应用于项目中，能够处理各种复杂的模块依赖关系，实现代码的打包和优化。Vite作为一个新兴的构建工具，以其快速的开发启动和热更新能力受到关注。本文旨在深入探讨Webpack和Vite的原理与异同之处，帮助开发者更好地理解和应用这两种工具。Webpack

原理

Webpack是一个静态模块打包工具，它将多个模块打包成一个或多个bundle。Webpack的工作原理主要包括：

  • 模块解析：Webpack从入口文件开始，递归解析模块的依赖关系。

  • 依赖图构建：根据模块之间的依赖关系构建一个依赖图。

  • 代码转换：通过Loader将不同类型的文件转换为Webpack能够处理的模块。

  • 模块组装：将经过转换的模块组装成一个或多个bundle。

  • 输出文件：最终将bundle输出到指定目录。

先逐级递归识别依赖，构建依赖图谱，将代码转化成AST抽象语法树，在AST阶段中去处理代码，把AST抽象语法树变成浏览器可以识别的代码， 然后输出。

image-ecfc.png

Webpack 会遍历你的应用程序中的所有文件，并启动一个开发服务器，然后将整个代码渲染到开发环境中。

  • webpack从一个entry.js文件开始，将其依赖的所有js或者其他assets通过loader打包成一个文件， 随后这个打包后的文件将被从server传递到客户端浏览器运行。
  • 因为这样的处理规则，当保存文件时，整个 JavaScript 包将由 Webpack 重新构建，这就是为什么更改可能需要长达 10 秒才能反映在浏览器中，更新速度会随着应用体积增长而直线下降。

Vite

Vite（法语意思是 “快”）是一种全新的前端构建工具。可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，类似webpack + webpack-dev-server，但是更轻更快。 Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。

原理

Vite是一个基于ESM的快速开发工具，它利用浏览器原生ES模块的特性，无需打包即可实现快速开发和热更新。Vite的原理主要包括：

  • 服务端实时编译：Vite通过服务端实时编译ESM模块，将其转换为浏览器可执行的代码。
  • 模块即时导入：在开发过程中，Vite能够实时响应模块的导入，无需预先打包。
  • 构建并返回响应：Vite将编译后的模块返回给浏览器，实现快速的开发和热更新。

image-qccx.png

Vite 的工作方式不同，它不会遍历整个应用程序，Vite 只是转换当时正在使用的文件/模块。

  • Vite的核心理念：非捆绑开发构建
  • Vite 的核心思想：浏览器请求它时，使用 ES 模块转换并提供一段应用程序代码。
  • 开始开发构建时，Vite首先将JavaScript 模块分为两类：依赖模块和源码模块。
  • 依赖项模块是第三方依赖的代码，从node_modules文件夹中导入的JavaScript 模块。这些模块将使用esbuild进行处理和捆绑，esbuild是一个用 Go 编写的 JavaScript 打包工具，执行速度比 Webpack 快 10-100 倍。
  • 源码模块是源代码，即业务代码，通常涉及特定库的扩展，如：.jsx、.vue、.scss文件。
  • 它使用基于路由的代码拆分来了解代码的哪些部分实际需要加载，因此，它不必重新打包所有内容。
  • 它还使用现代浏览器中的原生 ES 模块支持来交付代码，这让浏览器可以在开发中承担打包工作。
  • 在生产方面，虽然现在所有主流浏览器都支持原生 ES 模块，但它实现了诸如 tree-shaking、延迟加载和通用块拆分等性能优化技术，仍然比非打包应用程序带来更好的整体性能。出于这个原因，Vite附带了一个预先配置的build命令，该命令使用Rollup打包来打包和实现各种性能优化。

Webpack 这样的基于打包器的工作流必须在单个浏览器请求之前处理整个 JavaScript 模块，但 Vite 只在单个浏览器请求之前处理依赖模块。这就是为什么 Vite 能够比 Webpack 更快地处理开发构建。

Webpack与Vite的比较

优点

  • Webpack：
    • 强大的插件系统和生态系统。
    • 可以处理复杂的项目需求。
    • 成熟稳定，广泛应用于各种项目中。
  • Vite：
    • 快速的冷启动速度。
    • 基于ESM的开发模式，无需打包。
    • 适合中小型项目，开发效率高。

缺点

  • Webpack：
    • 打包速度较慢，特别是在大型项目中。
    • 配置复杂，学习曲线较陡。
    • 生成的文件体积较大。
  • Vite：
    • 对部分特性的支持不完善。
    • 生态相对较新，可能存在一些不稳定性。

异同之处

  • Webpack是一个静态打包工具，需要将所有模块打包成静态文件，而Vite利用浏览器原生支持的ESM特性，无需打包，实现快速开发。
  • Webpack适合处理复杂的大型项目，而Vite更适合中小型项目，能够提高开发效率。
  • Webpack的生态和插件系统更加成熟稳定，而Vite则在快速开发和热更新方面表现更优秀。
工程化