webpack和vite的区别

基本介绍

Webpack是一个模块打包工具，使得工程中的各种资源能够被打包成一个整体的bundle.js文件。Webpack具有很高的可配置性和灵活性，使得开发者可以使用各种插件和配置文件来优化它们的工作流程。Webpack适用于大型、复杂的项目，它可以处理多种不同类型的文件（如js、css、图片等），并根据需求进行转换、压缩和打包。但是，Webpack的配置可能比较复杂，需要花费一定的时间和精力进行学习和调试。
Vite是一个快速、轻量级的现代Web开发构建工具，它利用现代浏览器的原生ES模块加载功能，实现了开发环境中的快速冷重载和构建速度。Vite的开发体验非常好，因为它能够在开发时实时更新页面，而不需要对整个项目进行重新构建。相比于Webpack的构建过程，Vite的开发速度更快，也更适合小型、简单的项目。但是，Vite目前还不支持像Webpack那样的插件生态系统，因此其可扩展性还有待提高。

区别

1. 工作流程

   • Webpack打包是先分析项目路由然后分析路由相对应的模块，然后全部打包，再调用服务器，所以编译速度较慢，没有用到的模块也全部打包了。
   • Vite是先调用服务器，直接准备好，然后看你请求的是哪一个路由然后只去打包哪一个路由所对应的模块，没有请求的路由就不去打包，做到了按需编译打包，不再等待整个应用编译完成，提高了编译运行时速度。

2. 构建速度

   • Webpack 是一个非常强大的构建工具，但是随着项目规模的增大，Webpack 的构建速度会变得越来越慢，因为它需要将所有模块打包到一个文件中，每次修改都需要重新构建整个项目。
   • Vite 采用的是基于浏览器原生 ES 模块的特性，即只会对修改的模块进行重新构建，因此在大型项目中，Vite 的构建速度要比 Webpack 快得多。

3. 开发模式

   • 在开发过程中，Webpack 需要将代码打包到一个文件中，然后再在浏览器中进行热更新。这意味着每次修改都需要重新构建整个项目，这会造成较长的等待时间。
   • Vite 的开发模式是在浏览器中实时编译和构建代码，这意味着开发者可以在不断开页面的情况下进行实时更新，这样可以大大提高开发效率。

4. 配置复杂度

   • Webpack 的配置非常灵活，可以处理各种不同的情况。但是这也导致了配置比较复杂，需要花费一些时间去学习和调试。 比如：跨域、代码压缩、代码分割、css预处理器的代码转换、样式兼容性、vue/react代码解析、图片压缩、代码热更新、es降级、ts转换等等，远不止这些。
     概念和配置项太多，我们需要了解各种loader、plugin的使用，并且需要根据项目场景，对配置不断进行优化。
     所以就出现了一些基于webpack上层封装的脚手架，如：vue-cli、create-react-app、umi等。
   • Vite 的配置则相对来说要简单得多，基于 Rollup，大部分情况下只需要简单地配置几个选项就可以完成配置。常用功能都做了内置，比如：css 预处理器、html 预处理器、hash 命名、异步加载、分包、压缩、HMR等等。还有很多的模版可以借鉴使用。

5. TypeScript支持

   • webpack需要额外的loader来处理TypeScript。
   • Vite内置了对TypeScript的支持。

6. 插件生态

   • Webpack 已经有着非常庞大的插件生态圈，这些插件可以为开发者提供各种不同的功能，如压缩代码、优化性能等。
   • Vite 还比较年轻，尽管已经有一些插件可以使用，但是相对于 Webpack 来说还是比较少的。

7. 生产环境

   • Rollup 是一款 ES Module 打包器， 从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。 因为小巧，自然在这种特定的打包环境下，Rollup的打包速度也要比 Webpack 快很多。
     同时，Vite还支持预构建和预渲染技术，能够在构建时生成静态HTML文件，加速页面的首次加载。开发环境速度更为明显。

8. 底层代码

   • Webpack是基于nodejs运行的，但js只能单线程运行，无法利用多核CPU的优势，当项目越来越大时，构建速度也就越来越慢了。
   • Vite底层是使用esbuild，用go语言编写的，可以充分利用多核CPU的优势，所以vite开发环境下的预构建与按需编译速度，都是非常快的。

综上所述，Webpack 和 Vite 都是非常好的前端构建工具，它们之间的区别在于构建速度、开发模式、配置复杂度和插件生态等方面。在选择构建工具时，需要根据实际需求和项目规模来选择合适的工具。对于小型项目或者需要快速开发的项目，可以选择 Vite；对于大型项目或者需要更多自定义的项目，可以选择 Webpack。

Esbuild & Rollup

1、开发环境：Esbuild

是一个JavaScript、 Bundler 打包和压缩工具，它提供了与Webpack、Rollup等工具相似的资源打包能力。可以将JavaScript

• 预构建：

  • 支持commonJS依赖
  • 上面提到Vite是基于浏览器原生支持ESM的能力实现的，但要求用户的代码模块必须是ESM模块，因此必须将commonJs的文件提前处理，转化成 ESM 模块并缓存入 node_modules/.vite
  • 减少模块和请求数量（我们常用的lodash工具库，里面有很多包通过单独的文件相互导入，而 lodash-es这种包会有几百个子模块，当代码中出现 import { debounce } from ‘lodash-es’ 会发出几百个 HTTP 请求，这些请求会造成网络堵塞，影响页面的加载。
    Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。
    通过预构建 lodash-es 成为一个模块，也就只需要一个 HTTP 请求了）

• Esbuild优点：

  • 编译运行 VS 解释运行
    大多数前端打包工具都是基于 JavaScript 实现的，大家都知道JavaScript是解释型语言，边运行边解释。而 Esbuild 则选择使用 Go 语言编写，该语言可以编译为原生代码,在编译的时候都将语言转为机器语言，在启动的时候直接执行即可，在 CPU 密集场景下，Go 更具性能优势。
  • 多线程 VS 单线程
    JavaScript 本质上是一门单线程语言，直到引入 WebWorker 之后才有可能在浏览器、Node 中实现多线程操作。就我对Webpack的源码理解，其源码也并未使用 WebWorker 提供的多线程能力。而GO天生的多线程优势。
    对构建流程进行了优化，充分利用 CPU 资源

2、生产环境：Rollup
Rollup是基于ESM的JavaScript打包工具。相比于其他打包工具如Webpack，他总是能打出更小、更快的包。因为 Rollup 基于 ESM 模块，比 Webpack 和 Browserify 使用的 CommonJS模块机制更高效。Rollup的亮点在于同一个地方，一次性加载。能针对源码进行 Tree Shaking(去除那些已被定义但没被使用的代码)，以及 Scope Hoisting 以减小输出文件大小提升运行性能。

vite生产环境和开发环境

• 【生产环境】下，为什么使用【rollup打包】呢？
  Rollup 是一款 ES Module 打包器， 从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多，打包生成的文件更小。 因为小巧，自然在这种特定的打包环境下，Rollup的打包速度也要比 Webpack 快很多。
  vite正是基于es module的特性实现的，所以使用rollup要更合适一些。

• vite生产环境下，为什么不用【esbuild打包】呢？
  尽管esbuild的打包速度比rollup更快，但 Vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容，rollup插件api与基础建设更加完善，所以在生产环境vite使用rollup打包会更稳定一些。
  如果后面esbuild基础建设与生态更加完善后，esbuild还是更有优势的。