【前端知识】前端构建工具webpack的平替vite

文章目录

- - 一、基本概念
  - 二、核心特性
  - 三、安装与配置
  - 四、工作原理
  - 五、优缺点
  - 六、与Webpack的对比

Vite是一种新型的前端构建工具，能够显著提升前端开发体验。以下是对Vite的详细介绍：

一、基本概念

Vite（法语意为“快速的”，发音/vit/，发音同“veet”）由尤雨溪（Evan You）创建，他同时也是Vue.js框架的作者。Vite利用浏览器原生ES模块导入（ESM）的能力来提供一种快速的开发环境，通过在开发时将模块请求转发给浏览器，然后在生产环境中预构建这些模块来提供优化。

二、核心特性

快速的冷启动：Vite不需要打包操作，可以快速启动开发环境。它借助了浏览器对ESM规范的支持，实现了极快的冷启动速度。
即时模块热更新（HMR）：保存文件后，Vite只重新加载实际更改的文件，这使得热更新非常快。Vite的HMR机制基于原生ESM，同时利用浏览器缓存策略提升速度。
丰富的插件生态和完整的开发环境：Vite可以使用与Rollup兼容的插件，并提供了开箱即用的功能，如TypeScript支持、CSS预处理器、文件导入等。
优化的生产构建：Vite在生产环境下使用Rollup打包，这意味着可以获得高效的树摇（tree-shaking）、懒加载和其他生产优化功能。

三、安装与配置

安装Vite：可以使用npm或者yarn来安装Vite。例如，使用npm安装Vite并初始化一个Vue项目的命令如下：
```
npm init vite@latest my-vite-app --template vue
cd my-vite-app
npm install
```
运行Vite项目：安装完成后，进入项目文件夹，安装依赖并启动开发服务器。例如，启动开发服务器的命令如下：
```
npm run dev
```
这将启动本地开发服务器，默认在localhost:3000。

配置Vite：Vite的配置文件是vite.config.js或vite.config.ts（如果使用TypeScript）。在这个文件中，可以配置服务器、构建选项、插件等。例如：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({plugins: [vue()],server: {port: 3000,open: true,},build: {outDir: 'dist',assetsDir: 'static',},
});

四、工作原理

开发环境：Vite省略了开发环境的打包过程，利用浏览器去解析import，在服务端按需编译返回相关代码。同时，它拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。
生产环境：Vite使用Rollup进行代码分割和优化，生成最终的静态资源文件。

五、优缺点

优点：
- 更快的冷启动：Vite不需要进行打包即可启动服务。
- 更快的热更新：Vite在热更新时，只是重新请求该模块即可。
- 丰富的插件生态：Vite的插件生态正在快速增长，许多插件都是基于Rollup插件API构建的。
缺点：
- 开发环境下首屏加载变慢：由于不需要打包（unbundle机制），Vite首屏加载需要额外做其他工作。不过首屏加载性能差只发生在开发服务器启动后的第一次页面加载，之后再reload页面时，首屏性能会好很多。
- 开发环境下懒加载变慢：由于不需要打包（unbundle机制），动态加载的文件需要做resolve、load、transform、parse操作，并且还有大量的http请求，导致懒加载性能也受到影响。

六、与Webpack的对比

构建过程：
- Webpack：是一个模块打包工具，它通过一个入口文件开始，递归地构建一个依赖图，包含应用程序所需的每个模块，然后将这些模块打包成一个或多个bundle。在开发模式下，它提供了一个开发服务器和热模块替换（HMR），但随着项目规模的增加，重新构建的时间可能会变长。
- Vite：在开发模式下不进行打包操作。它利用现代浏览器支持的原生ES模块导入特性来进行模块的热替换，这大大加快了开发服务器的启动速度和模块的热更新速度。在生产模式下，Vite使用Rollup来打包应用。
开发体验：
- Webpack：热模块替换在大型项目中可能会变得缓慢；配置相对复杂，尤其是对于新手来说，配置高度可定制化同时也意味着需要更多的学习和调试时间。
- Vite：提供了极快的服务器启动和热更新体验，无论项目大小；配置更简单直观，而且大部分情况下开箱即用，对于新手更友好。
插件生态：
- Webpack：拥有一个庞大且成熟的插件生态系统，几乎可以找到任何所需的插件来扩展其功能。但插件的质量和维护状况参差不齐，选择和配置插件可能需要仔细考虑。
- Vite：插件生态正在快速增长，许多插件都是基于Rollup插件API构建的。尽管Vite支持Rollup插件，但并非所有Rollup插件都与Vite兼容。
生产构建：
- Webpack：优势在于其高度优化的打包能力，特别是在复杂的应用程序和代码分割方面。
- Vite：在生产环境下使用Rollup进行打包，这通常会产生更小的代码体积，但可能不如Webpack在某些复杂场景下灵活。