前端构建工具 Vite

为什么选Vite

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Vite的优势

1. 开发环境中，无需打包操作，可快速的冷启动。
2. 轻量快速的热重载（HMR）。
3. 真正的按需编译，不再等待整个应用编译完成。 传统 webpack 编译：每次执行编译时，都会通过入口 entry 先去找到各个路由，再去加载每个路由各自的模块，然后会进行打包成为 bundle.js 文件，最后才通知服务器热更新。所以换句话说就是等所有文件加载就绪之后才去渲染更新页面的==》较慢
4. vite 编译：与传统构建不同的是，vite 会先准备好服务器更新，再去找到入口文件然后再动态的找到需要加载的路由去编译那个路由下的模块，类似于按需加载，总体体积较小且更新更快。

Vite-Cli 快速搭建项目

一、相关准备

• Vite要求Node.js版本>=12.2.0。然而，一些模板需要更高的Node.js版本才能工作，如果你的包管理器发出警告，请升级。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js，参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么，请在终端窗口中运行node -v。
• npm 包管理器 因为我们通常都会使用Vite 提供的脚手架搭建项目结构，所以要下载并安装 npm 包并且npm >= 6。，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v 。

二、创建项目

1、基础创建：
使用npm：

npm create vite@latest

   
   
    
    

使用yarn：

yarn create vite  //yarn

   
   
    
    

使用pnpm：

pnpm create vite

   
   
    
    

2、指定要使用的项目名称和模板，例如，要构建一个 Vite + Vue 项目，运行：

//项目名：my-vue-app；  模板：vue

npm create vite@latest my-vue-app –template vue // npm 6.x

npm create vite@latest my-vue-app – –template vue //npm 7+

yarn create vite my-vue-app –template vue //yarn

pnpm create vite my-vue-app – –template vue //pnpm

三、启动项目

先到自己的项目下： cd my-project，然后：

npm install
npm run dev

 
 
  
  

为什么选Vite

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

Vite的优势

1. 开发环境中，无需打包操作，可快速的冷启动。
2. 轻量快速的热重载（HMR）。
3. 真正的按需编译，不再等待整个应用编译完成。 传统 webpack 编译：每次执行编译时，都会通过入口 entry 先去找到各个路由，再去加载每个路由各自的模块，然后会进行打包成为 bundle.js 文件，最后才通知服务器热更新。所以换句话说就是等所有文件加载就绪之后才去渲染更新页面的==》较慢
4. vite 编译：与传统构建不同的是，vite 会先准备好服务器更新，再去找到入口文件然后再动态的找到需要加载的路由去编译那个路由下的模块，类似于按需加载，总体体积较小且更新更快。

Vite-Cli 快速搭建项目

一、相关准备

• Vite要求Node.js版本>=12.2.0。然而，一些模板需要更高的Node.js版本才能工作，如果你的包管理器发出警告，请升级。您可以使用n、nvm或nvm-windows 在同一台机器上管理多个版本的Node。 要了解如何安装 Node.js，参阅nodejs.org。 如果你不确定系统中正在运行的 Node.js 版本是什么，请在终端窗口中运行node -v。
• npm 包管理器 因为我们通常都会使用Vite 提供的脚手架搭建项目结构，所以要下载并安装 npm 包并且npm >= 6。，你需要一个 npm 包管理器。本指南使用 npm 客户端命令行界面，该界面默认安装在 Node.js。要检查你是否安装了 npm 客户端，请在终端窗口中运行 npm -v 。

二、创建项目

1、基础创建：
使用npm：

npm create vite@latest

   
   
  
  

使用yarn：

yarn create vite  //yarn

   
   
  
  

使用pnpm：

pnpm create vite

   
   
  
  

2、指定要使用的项目名称和模板，例如，要构建一个 Vite + Vue 项目，运行：

//项目名：my-vue-app；  模板：vue