vite2.0-00-聊一聊 vite

vite 系列

00-聊一聊 vite
01-vite 等构建工具对比
02-vite 实战入门
vite 是什么？

Vite 是一个由 Evan You（Vue.js 的创造者）开辟的当代化构建工具，旨在为前端开辟提供更快、更流畅的体验。
Vite 的筹划目标是解决传统构建工具（如 Webpack）在开辟过程中存在的一些性能瓶颈，特别是在冷启动和热更新（HMR）方面。
Vite 使用了当代浏览器的特性，比方原生 ES 模块和 HTTP/2，以加速开辟和生产构建流程。
Vite 的告急特点

• 极速冷启动：
  
  
  
  • Vite 通过使用浏览器对 ES 模块的原生支持，实现了按需加载。在开辟模式下，Vite 不必要对整个项目进行打包，而是根据请求动态加载必要的文件，避免了传统构建工具在启动时必要处理大量文件的题目。
    
  
  
• 基于 ES 模块的开辟模式：
  
  
  
  • 在开辟模式下，Vite 使用了当代浏览器对原生 ES 模块的支持。浏览器直接请求模块文件，而不是经过复杂的打包过程。这种方式大大缩短了冷启动时间。
    
  • 当你修改源代码时，Vite 仅重新加载变更的模块，而无需重新构建整个应用。
    
  
  
• 快速热模块替换（HMR）：
  
  
  
  • Vite 提供了快速的热模块替换功能。当你修改代码时，Vite 会仅更新变更的部分，而不会革新整个页面。这使得开辟过程更加高效，特别是在大型项目中。
    
  • 由于 Vite 使用原生 ES 模块，它能够准确地追踪哪些模块发生了变化，快速传递变更给浏览器。
    
  
  
• 开箱即用的优化：
  
  
  
  • Vite 默认内置了很多优化，如：代码分割、自动加载模块、支持 Vue、React、TypeScript 等主流技术栈，以及内置支持 PostCSS、CSS Modules 和静态资源处理等。
    
  • 开辟者无需手动设置复杂的工具链（如 Webpack 或 Babel），Vite 默认启用了很多最佳实践，而且支持高度的自界说。
    
  
  
• 支持生产构建优化：
  
  
  
  • Vite 在生产构建时依赖 esbuild，这是一个高效的 Go 语言编写的打包工具，能够在非常短的时间内完成代码转译、压缩和优化操作。
    
  • Vite 对 JavaScript、CSS 和静态资源进行优化，使得构建出来的产物非常高效，支持代码分割和懒加载。
    
  
  
• 插件生态：
  
  
  
  • Vite 提供了强盛的插件机制。你可以通过插件来扩展其功能，集成其他工具或调整构建流程。
    
  • Vite 的插件系统与 Rollup 插件兼容，因此可以使用大量现有的 Rollup 插件。
    
  
  
• 支持多种前端框架：
  
  
  
  • Vite 原生支持 Vue 和 React，但也支持其他框架，如 Svelte、Preact、LitElement 等。
    
  • 通过安装相应的插件，你可以在 Vite 中使用任何主流框架。
    
  
  

Vite 告急特性介绍

1. 开辟模式

• ES 模块支持：Vite 使用浏览器原生支持的 ES 模块，按需加载模块，无需一次性打包整个项目。如许做的利益是，开辟时启动速度更快，且更新速度更快。
  
• 动态导入：Vite 支持原生的动态 import() 语法，能在必要时动态加载模块。
  
• 快速 HMR：Vite 对每个模块有更准确的热更新支持，模块变更时只更新有变化的部分，而不是重新加载整个页面。
  

2. 构建模式

• 基于 esbuild：Vite 在生产构建时使用 esbuild 进行 JavaScript 和 CSS 的压缩、转译和打包。esbuild 是一个用 Go 编写的构建工具，性能非常高，能够大幅缩短构建时间。
  
• 代码分割：Vite 默认支持代码分割功能，能够将你的应用分为多个模块，以便按需加载，优化加载时间。
  
• 自动压缩：Vite 会自动对生产环境的代码进行压缩，以减小文件体积。
  

3. 插件系统

• Rollup 插件支持：Vite 的插件机制与 Rollup 兼容，你可以使用大部分现有的 Rollup 插件，也可以编写自己的插件来扩展功能。
  
• 内置插件：Vite 提供了一些内置插件，如对 Vue 和 React 的支持、支持 TypeScript、CSS 处理、静态资源处理（如图片、字体）等。
  

4. 静态资源

• 静态资源支持：Vite 支持导入图片、字体、JSON 等静态资源，并自动进行处理。资源可以作为模块导入，Vite 会自动为其天生 URL。
  

5. 兼容性

• Vue 3 默认支持：Vite 默认支持 Vue 3 的开辟，包罗 Vue 3 的 Composition API 和新版本的特性。
  
• React/Preact 支持：Vite 也为 React 和 Preact 提供了原生支持，而且提供了相关的插件。
  
• TypeScript 支持：Vite 内置对 TypeScript 的支持，设置非常简单。
  

前端的构建是不是太多了？着实重复造轮子吗？

每个工具的筹划哲学和目标都有差异，适用于不同的需求和场景。
我们可以从几个方面来看这个题目：
1. 需求的多样性

• 项目规模与复杂度：不同类型的项目（如小型项目、复杂应用、库构建等）有不同的需求。小型项目可能必要一个简单快速的构建工具，而大型项目可能必要更强盛且可定制的构建工具。比如 Vite 和 Parcel 适合小型到中型项目，Webpack 和 Rollup 更适合复杂的、必要精致控制和优化的项目。
  
• 生态和社区支持：有的构建工具有着更强的社区支持和插件生态，能提供更多的功能扩展。比方，Webpack 作为一个成熟的工具，有着广泛的插件和加载器支持，适用于几乎所有的前端需求；而 Vite 则专注于开辟体验和当代前端技术栈。
  
• 开辟体验：开辟者体验也是一个告急的思量因素。工具如 Vite 和 Parcel 强调开箱即用和快速启动，减少设置成本；而 Webpack 则更多强调灵活性和功能的可扩展性，适合那些必要高度定制的项目。
  

2. 前端工具的演变

• 前端构建工具的演化告急是为了应对不同的技术变革。比如，Webpack 的出现是在 JavaScript 生态必要模块化和资源管理的背景下，而随着 ES 模块的遍及和开辟体验的需求增加，像 Vite 如许的工具才应运而生。
  
• esbuild、Parcel、Vite 等工具强调的是更高的性能和更流畅的开辟体验，尤其在热更新和构建速度上做了优化。而 Webpack 和 Rollup 则提供了更多的功能和灵活性，适合更复杂的项目需求。
  

3. 选择权和灵活性

• "重复造轮子" 的感觉往往来源于多种工具之间的功能重叠，但现实上，它们也给开辟者提供了更多的选择。在不同的场景下，开辟者可以根据自己的需求和偏好选择最适合的工具。比方：
  
  
  
  • 如果你的项目要求启动速度非常快，热更新非常流畅，可能 Vite 或 esbuild 更适合。
    
  • 如果你的项目必要处理大量的模块、资源优化和代码分割，可能还是 Webpack 或 Rollup 更合适。
    
  
  
• 这种多样性带来了灵活性和创新性，让开辟者可以选择适合自己的工具，避免一个工具“万能”的单一局限。
  

4. 创新和优化

• 每个工具的出现和进化，背后都有不同的目标和动机。比如：
  
  
  
  • Vite 提供极快的开辟体验，它通过依赖于原生 ES 模块和当代浏览器特性来避免传统打包工具中的瓶颈。
    
  • esbuild 的筹划目标是尽可能快地构建和编译，尤其适合必要快速构建的项目。
    
  • Webpack 提供了高度定制化和丰富的插件系统，适合必要复杂构建过程和优化的项目。
    
  
  
• 这些工具之间的竞争现实上推动了前端开辟工具的创新。比方，esbuild 和 Vite 就通过优化构建速度和开辟体验，给开辟者带来了显著的效益。
  

5. 标准化与统一化的挑战

• 只管很多工具提供了相似的功能，但不同的前端框架和技术栈（如 React、Vue、Angular 等）对构建工具有不同的偏好。工具的发展偶尔是为了应对这些框架或特定场景的需求。
  
• 由于前端技术的多样性，不同的团队和项目有不同的需求，工具选择因此变得分散。而统一化的构建工具标准化往往是一个渐进的过程，随着技术的成熟和社区的协作，可能会逐步趋于统一。
  

总结

前端构建工具的多样性并不意味着“重复造轮子”，而是对不绝变化的需求、技术栈和开辟者体验的响应。
虽然工具之间有重叠，但它们各自的差异化功能、优化目标和使用场景使得开辟者能够在不同的项目和环境下作出选择。
终极的目标是提高开辟服从、优化性能并降低复杂度，因此这些工具的演化和竞争对前端开辟的进步起到了积极的推动作用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。