这是我参与「第五届青训营」笔记创作活动的第14天

1.vite的基本概念

1.1基本简介

对于前端工程师来说，Vite是一种构建Web应用程序的工具。它的核心功能是帮助开发人员更快、更方便地构建和管理前端应用。

与传统构建工具不同，Vite采用了一种“即时重新加载”的技术，可以在开发过程中实时地反映更改，大大缩短了开发周期。此外，Vite还具有更快的构建速度和更低的内存占用，可以提高开发人员的工作效率。

Vite的核心优势在于：

即时重新加载：Vite可以实时地反映更改，大大缩短了开发周期。
构建速度快：Vite比传统构建工具更快，可以提高开发人员的工作效率。
内存占用低：Vite的内存占用更低，可以降低开发人员的工作负担。

1.2浏览器原生ESM支持

浏览器原生ESM支持指的是，浏览器对于 ECMAScript 模块（ESM）的支持。ECMAScript 模块是 JavaScript 的模块系统，允许开发人员将代码分成多个独立的模块，以便于更好的组织和管理代码。

基于浏览器原生的 ESM 支持，Vite可以在浏览器端直接加载 ECMAScript 模块，从而避免了对第三方打包工具（如 Webpack）的依赖，简化了前端构建流程。

此外，Vite还可以利用浏览器原生的 ESM 支持，以更高效的方式管理模块的加载，提高了页面加载速度，并降低了带宽消耗。

2.vite的基本架构

2.1使用vite

安装 Vite：您可以使用 npm 或 yarn 来安装 Vite，命令如下：

java
npm install -g @vite/cli

创建项目：在您的项目目录中，您可以使用 Vite 创建项目，命令如下：

lua
vite create my-project

运行项目：您可以使用以下命令运行 Vite 项目：

bash
cd my-project
npm run dev

编译项目：您可以使用以下命令编译 Vite 项目：

npm run build

部署项目：您可以将生产版本的 Vite 项目部署到服务器上，以供公众使用。

2.2sass介绍

Sass 是一种 CSS 预处理器，它提供了诸如变量、嵌套规则、继承、混合等高级功能，使 CSS 的开发和维护变得更加方便。

在 Vite 中，Sass 用于为项目的 CSS 样式提供额外的功能，可以使您的 CSS 代码更加简洁和可读。

以下是一个使用 Sass 的示例：

css
// variables.scss
$primary-color: #333;

// base.scss
body {
  font-size: 16px;
}

// styles.scss
@import "variables.scss";
@import "base.scss";

a {
  color: $primary-color;
  text-decoration: none;
}

上面的代码将 Sass 文件中定义的变量和样式导入到 CSS 文件中，以便在 CSS 中使用。

您可以使用 Vite 的插件，如 vite-plugin-sass 来支持 Sass 文件的编译。在 Vite 项目中使用 Sass 的简单方法如下：

安装插件：

css
npm install --save-dev vite-plugin-sass

在 Vite 项目的配置文件 vite.config.js 中配置插件：

javascript
import sass from 'vite-plugin-sass'

export default {
  plugins: [sass()]
}

在 Vite 项目中使用 Sass 文件：

php
<template>
  <div class="app">
    <h1>Hello Vite with Sass!</h1>
  </div>
</template>

<style lang="scss">
@import './styles.scss';

.app {
  background-color: $primary-color;
  padding: 20px;
}
</style>

以上代码实现了在 Vite 项目中使用 Sass 的示例。

2.3Tree-shaking相关和chunk

Vite在开发环境下的依赖预打包保证了兼容性和代码压缩的功能是通过使用Tree-shaking和代码分割技术实现的。

Tree-shaking是一种编译技术，它可以确定你代码中哪些部分是真正用到的，从而只编译需要用到的代码。这样能够保证代码体积的最小化。
代码分割技术可以把代码分成不同的chunk，每个chunk只包含应用需要的代码。这样在用户请求页面时，只会加载必要的chunk，从而达到优化页面加载速度的效果。

通过使用这两种技术，Vite可以在开发环境下保证代码的兼容性和代码压缩的功能。

【青训营】Vite知识体系