Vite.js：构建更快的前端

**TL;DR:** Vite.js 是一款现代前端构建工具，可显著加快开发速度并提高性能。它提供即时服务器启动、热模块替换 (HMR) 和与 Rollup 高效捆绑等功能，使其成为 Webpack 等传统工具的强大替代品。

近年来，随着技术的飞速进步，前端开发对速度和效率的追求越来越重要。考虑到软件应用中对近乎即时的加载时间和无缝交互的高需求，高性能和高生产力从技术和业务角度都至关重要。由于传统构建工具通常无法满足这些关键要求，开发人员不断被复杂的配置和缓慢的构建时间所困扰。这就是 Vite 等新构建工具发挥作用的地方。

什么是 Vite？

Vite 是一个相对较新的工具，用于加速和简化前端开发过程。传统的构建工具通常旨在一次性创建所有代码的完整包。这个过程可能很慢而且令人烦恼。Vite 通过在开发过程中将您的代码作为 **ES 原生模块** 提供给浏览器来解决这个问题，这大大减少了初始负载并改善了用户体验。

在开发环境中，Vite 只会加载当前需要的代码部分。每当代码发生更改时，它只会使用**热模块替换** (HMR) 更新相关模块，这样您就可以在浏览器中立即看到最新更改，而无需等待整个页面重新加载。因此，这种技术不仅可以提高整体开发速度并降低开发成本，而且也许最重要的是，它使开发过程压力更小，尤其是在大型项目中。

在进行生产构建时，它使用 Rollup 将代码打包成优化文件。此过程可最小化代码并从生产构建中删除不需要的文件。

Vite 的主要功能

Vite 具有多种功能，前端开发人员可以利用这些功能以更少的努力显著缩短构建时间。然而，Vite 的这三个关键功能才是真正的关键。

立即启动服务器

Vite 的一个突出特点是它能够非常快速地冷启动开发服务器。尽管 Webpack 和 Parcel 等传统构建工具也提供同样的功能，但它们通常需要经过漫长的初始捆绑过程才能为应用程序提供服务。因此，它会让开发人员体验到令人沮丧的漫长等待时间和更多的资源消耗。就 Vite 而言，它将应用程序模块分为源代码和依赖项。然后，Vite 通过在原生 ESM 上提供服务，消除了预捆绑源代码的需要，并显著缩短了开发服务器的启动时间。

闪电般快速的 HMR（热模块替换）

HMR 对于顺畅的开发者体验至关重要，因为它允许前端开发人员实时查看所做的更改，而无需重新加载整个页面。否则，每次进行更新时，打包器都必须一次又一次地重建整个应用程序。由于使用了原生 ES 模块和细粒度更新，Vite 的 HMR 功能非常快速和可靠，即使与 Create React App 等其他类似解决方案相比也是如此。

有效的构建过程

Vite 使用 Rollup 进行生产构建，Rollup 是一款功能强大且灵活的打包工具，可确保高性能。它配备了多种技术，例如 tree-shaking（Rollup 会移除未使用的代码，从而减小打包大小）、代码拆分（将应用拆分为更小且更易于管理的块，以便按需加载）和延迟加载，可帮助 Vite 在生产环境中优化加载时间。

为什么要使用 Vite？

上述主要功能使 Vite 成为构建更高效、更易于管理的前端的主要候选者。Vite 还支持现代 JavaScript 功能，例如动态导入和 async/await。它通过促进全面的错误处理和源映射，表现出极高的调试效率。

那么，考虑到所有因素，为什么要使用 Vite 来开发前端应用呢？因为它具有：

配置简单：Vite 的配置简单直接，可最大程度地减少设置和维护所花费的时间和精力。它几乎无需配置，并支持根据需要自定义配置。

框架支持：Vite 的无缝支持不仅扩展到 React，还扩展到一系列其他流行且广泛使用的框架，例如 Vue、Qwik、Preact、Lit 和 Svelte。

TypeScript 支持：Vite 不仅支持 TypeScript，而且还使用 esbuild 将 TypeScript 转换为 JavaScript，使得该过程比原始 TypeScript 快 20 到 30 倍。

支持现代 Web 标准：Vite 遵循现代 Web 标准，特别是使用原生 ES 模块。它方便开发人员使用最新的语法和功能，帮助他们确保代码的可扩展性和可维护性。

出色的开发者体验和可用性：在选择开发技术时，易用性和易理解性至关重要。在这方面，Vite 借助 HMR 为开发者提供了简单的配置和即时反馈，从而提供了出色的体验。

增强的性能：除了上述功能之外，Vite 还具有高效率和高性能，构建过程显著加快，等待时间最短，并且包更小且易于维护。

CSS 代码拆分：Vite 将每个模块的 CSS 提取到单独的文件中，并仅在加载相应模块时加载它们。因此，它有助于防止在初始加载期间经常出现未使用的 CSS 导致的性能问题。

Vite 与 Webpack

以下 Vite 和 Webpack 之间的比较将帮助您确定方法和性能上的差异：

Vite 和 Webpack 都与框架无关。

Vite 比更复杂的 Webpack 更容易学习和配置。因此，它对初学者来说很友好，并且在开始时需要的努力较少。

Webpack 功能丰富，配置复杂，虽然有一定优势，但性能较慢，对于大型项目尤其如此。Vite 提供了一种更精简的方法，可以兼容各种项目，并且特别注重性能和效率。

不仅仅是 Webpack，与其他久经考验的工具（如 Parcel 和 Create React App）相比，Vite 提供了更高的效率和速度。

开始使用 Vite

使用 Vite 创建项目非常简单。

步骤 1：初始化和设置

使用以下命令之一创建一个新的 Vite 项目。

npm create vite@latest

yarn create vite

它将提示您输入应用程序的名称并选择您想要的框架。

Enter your app name and select a framework

在创建项目后，以下提示将允许您从 TypeScript 和 JavaScript 中进行选择以继续开发。

Prompt to choose from TypeScript and JavaScript for project developement in Vite

第 2 步：导航并安装依赖项

使用**cd**进入项目目录**vite-sample-project**，使用以下命令安装项目依赖项：

npm install

步骤 3：运行开发服务器

您可以使用以下命令启动开发服务器：

npm run dev

访问浏览器即可发现您的应用正在 **http://localhost:5173/** 上运行。

****

**恭喜！** 您刚刚成功使用 Vite 创建了一个新的 React 应用！您可以尝试以下设置使用 Webpack 创建相同的应用，亲自感受一下其中的不同。

Webpack 实现

您可以使用 Webpack 建立一个项目，以清楚了解它与 Vite 方法的区别。

步骤 1：初始化项目

要为您的项目创建基本的 **package.json** 文件，请运行以下命令：

npm init -y

第 2 步：安装依赖项

与 Vite 不同，您必须手动安装 React 和 Webpack 相关的依赖项以及多个插件，才能运行应用程序。

npm install react react-dom 

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

步骤3：添加Webpack和Babel的配置文件

**webpack.config.js**

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    hot: true, // Enable Hot Module Replacement
  },
};

**.babelrc**

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

在使用 Vite 之前的方法中，使用简单的 **npm install** 安装依赖项后，您可以立即开始编码。无需像这样手动配置 Webpack、Babel 或任何加载器，因为 Vite 已预先配置了合理的默认值。

步骤 4 – 创建索引文件以开始使用

**公共/index.html**




  
  
  React App with Webpack

**src/index.js**

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  returnHello, from React app with Webpack 
}; 
ReactDOM.render(, document.getElementById('root'));

您的文件夹结构将反映以下内容。

步骤 5：构建并运行

最后，更新**package.json**文件。

"scripts": {
  "start": "webpack serve"
}

您可以尝试 **npm run start** 来启动开发服务器。

由于打包过程的原因，Webpack 的构建时间会比 Vite 更长。现在您已经体验过使用 Vite 和 Webpack 设置同一个 React 应用程序，因此很容易感受到速度、配置复杂性和整体体验方面的差异。Vite 能够简化开发过程，并减少等待构建的时间。只需几个简单的命令，您就可以启动并运行项目，只需最少的手动配置和显著的性能。

GitHub 参考

更多详细信息请参考 GitHub 演示。

结论

毫无疑问，Vite 改变了前端开发格局。它提供出色的速度，因此无论项目规模如何，都能提高性能和开发人员体验。凭借其值得称赞的启动速度和较短的反馈循环，Vite 确保开发人员可以专注于他们最擅长的事情：编写代码。

因此，如果您计划启动一个全新的项目或增强现有项目，Vite 将是一个不错的选择，因为它有很多优点。

感谢您的阅读！

CLIS.CC