Nuxt2和Nuxt3的差異

最近工作有碰到版本升級和優化的議題，有查了一下Nuxt的差異，整理在這篇文章。

Nuxt 2

• 基於 Webpack：
• • Nuxt 2 使用 Webpack 作為其默認的打包工具。
  • 您可以通過 webpack.config.js 或 nuxt.config.js 中的配置來自定義 Webpack 行為。
• 特性：
• • 支援 Vue 2。
  • 使用 vue-template-compiler。
  • 不原生支持 Vite，但可以通過插件（如 nuxt-vite）來集成 Vite。

Nuxt 3

• 基於 Vite：
• • Nuxt 3 默認使用 Vite 作為其打包工具，提供更快的開發體驗。
  • 同時也支持 Webpack，您可以選擇切換到 Webpack。
• 特性：
• • 支援 Vue 3。
  • 更快的熱重載（HMR）。
  • 原生支持 TypeScript。
  • 更輕量化，專為現代應用設計。

Vite和Webpack都是打包的工具，他們差異是？

Vite：

默認配置已足夠大多數場景，配置文件通常很簡單。快速開發、簡單配置，並且專案基於 Vue 或 React。

• 架構：
• • 基於 ES Modules 和 原生瀏覽器支持。
  • 在開發模式下，直接使用瀏覽器的 ES Modules，無需打包。
  • 使用 Rollup 作為生產模式的打包工具。
• 生態：
• • Vite 是一個較新的工具，生態系統正在快速增長。

Webpack：

• 架構：
• • 基於 模組打包。
  • 在開發模式下，所有文件都需要打包成一個或多個 bundle，然後提供給瀏覽器。
  • 提供高度可定制的打包流程。
• 生態：
• • Webpack 是一個成熟的工具，擁有廣泛的社區支持和插件生態。