Vite实例开发 ｜ 青训营笔记

前端工程的痛点

前端开发随着应用复杂度的增加，面临了许多挑战和痛点，这些痛点直接影响到开发效率、构建性能以及团队协作。以下是一些常见的前端工程痛点：

1. 构建速度慢：

   • 传统的构建工具（如 Webpack）需要对每次修改的代码进行完整的重新打包，导致开发过程中的构建时间长，影响开发效率。

2. 配置复杂：

   • 工具和插件的配置过于繁琐，需要编写大量的配置文件，尤其对于 Webpack 这类工具，初学者和小团队容易陷入配置地狱。

3. 模块热更新不及时：

   • 在开发过程中，很多工具需要重载整个页面或大部分资源，这不仅浪费时间，还会影响开发体验。

4. 项目体积过大：

   • 在构建时，应用程序中的许多代码和资源都需要被打包，导致最终产物体积庞大，影响加载时间和性能。

5. 依赖管理和版本冲突：

   • 随着项目和依赖的增多，容易出现依赖版本冲突和包管理问题，增加了项目维护的难度。

6. 跨平台兼容性问题：

   • 不同的浏览器和设备有不同的支持特性，前端工程需要在不同平台上进行兼容测试，确保一致性。

前端构建工具的意义

前端构建工具的出现旨在帮助开发者解决上述痛点，提升开发效率和构建性能。它们的主要意义体现在以下几个方面：

1. 自动化构建：

   • 构建工具可以自动化前端开发过程中的任务，如压缩代码、处理资源、生成最终产物等，减轻开发者的工作负担。

2. 模块化开发：

   • 现代构建工具支持模块化开发，帮助前端项目进行模块拆分、按需加载，提高代码的复用性和可维护性。

3. 性能优化：

   • 构建工具可以自动进行代码分割（Code Splitting）、压缩、去除无用代码（Tree Shaking）等优化，减小最终文件体积，提高加载速度。

4. 支持跨平台构建：

   • 通过构建工具，前端应用可以适配不同的浏览器和平台，解决兼容性问题，提供一致的用户体验。

5. 开发环境的提升：

   • 前端构建工具提供热模块替换（HMR）、快速构建和增量编译等功能，提高开发者的开发体验和工作效率。

6. 提高团队协作效率：

   • 统一的构建流程和工具链能够减少团队内部的摩擦，使得开发人员、测试人员和运维人员能够更加高效地协作。

Vite 概览

Vite（法语中意为“快速”）是由 Evan You（Vue.js 的创造者）主导开发的一个现代化前端构建工具。它主要解决了传统构建工具（如 Webpack）存在的一些痛点，尤其是在构建速度和开发体验方面的显著提升。

Vite 的核心特性包括：

1. 原生 ES 模块支持：

   • Vite 利用浏览器对 ES 模块的原生支持，在开发过程中直接通过浏览器加载模块，而无需打包和转换，这大大加速了开发时的热更新和启动速度。

2. 基于 ESBuild 的构建速度：

   • Vite 使用 Go 编写的构建工具 ESBuild 来进行编译和构建，ESBuild 的性能远远超过传统的 JavaScript 构建工具，能够实现极其快速的打包和构建。

3. 按需编译和热更新：

   • Vite 在开发过程中，通过按需编译和增量更新的方式，减少了每次修改后的构建时间，使得热更新变得更加快速和高效。

4. 优化静态资源：

   • Vite 支持对 CSS、图片、字体等静态资源的处理，能够自动进行优化和压缩，减少资源文件的体积。

5. 构建时优化：

   • 对于生产环境，Vite 会将 JavaScript 和 CSS 进行压缩、代码分割和 Tree Shaking，以减少最终的构建产物的体积。

6. 丰富的插件生态：

   • Vite 提供了丰富的插件机制，支持诸如 Vue、React、TypeScript、PWA 等功能的扩展。

Vite 业界案例

Vite 因其出色的性能和极佳的开发体验，已经被多个知名公司和开源项目采用。以下是一些业界的案例：

1. Vue 3：

   • Vite 本身由 Vue.js 的创造者开发，因此 Vue 3 在项目中使用 Vite 进行开发和构建，是 Vite 在社区中的重要应用场景。

2. React + Vite：

   • Vite 完全支持 React 和 JSX，通过对 React 项目的优化，Vite 能够提供更快的热更新和构建速度。许多 React 项目已经开始迁移到 Vite，享受其高效的开发体验。

3. VitePress：

   • VitePress 是基于 Vite 的静态网站生成器，它利用 Vite 提供的快速构建和模块热更新功能，构建出非常快速的文档网站。

4. TikTok（字节跳动）：

   • 字节跳动的某些前端项目已经开始使用 Vite 来替代 Webpack，以提高开发效率和构建速度。

5. GitHub：

   • GitHub 的某些内部工具也开始采用 Vite，借助其快速的开发模式和强大的插件支持，提升了开发体验。

Vite 优势

1. 极速的开发启动和热更新：

   • Vite 的开发模式不需要对整个项目进行打包，使用原生 ES 模块进行按需加载，启动速度极快。而且由于增量编译的支持，热更新也非常迅速。

2. 优异的构建性能：

   • Vite 基于 ESBuild 进行构建，ESBuild 提供了比传统 JavaScript 工具（如 Babel 或 Webpack）更快的构建速度，尤其在大型项目中表现得尤为突出。

3. 简单的配置：

   • Vite 提供了默认的开箱即用配置，减少了复杂的配置工作。对于开发者来说，只需要极少的配置即可启动项目。

4. 现代特性支持：

   • Vite 默认支持最新的 JavaScript 特性（如 ES Modules、TypeScript、动态导入等），并能够在生产环境中进行优化和压缩。

5. 插件系统和生态：

   • Vite 拥有强大的插件生态，可以轻松扩展支持各种框架和功能，如 Vue、React、PWA、Sass、PostCSS 等。

6. 适应性强，支持多种框架：

   • Vite 不仅支持 Vue 和 React，还支持其他现代框架如 Svelte、Preact 等，并且通过插件支持老旧的项目和代码。

7. 减少构建时间，提升开发体验：

   • 由于采用了更高效的增量编译和构建方式，Vite 大大减少了构建时间，在开发过程中大大提升了开发者的工作效率和体验。

在现代前端项目开发中，使用 Sass/Scss、CSS Modules 和静态资源管理，并通过 Tree Shaking 优化生产环境的代码，能够显著提升项目的可维护性、性能和开发效率。以下是如何在项目中实现这些功能的详细步骤：

1. 项目初始化

在初始化一个新项目时，通常会选择一些现代前端框架和工具链来构建项目。我们以 Vite 为例，来展示如何初始化一个项目并集成这些功能。

步骤 1：初始化 Vite 项目

首先，确保你已经安装了 Node.js，然后使用 Vite 初始化项目。

npm create vite@latest my-project --template vue
cd my-project
npm install

这里我们选择 Vue 作为框架，但你可以根据自己的需求选择 React 或其他框架。

步骤 2：安装所需依赖

接下来，安装 Sass/Scss 支持、CSS Modules 相关插件以及其他可能需要的插件。

npm install sass

Vite 默认支持 CSS Modules，无需额外安装。如果你要使用 Scss，可以直接在 .scss 文件中编写样式。

2. 配置 Sass/Scss 和 CSS Modules

使用 Sass/Scss

1. 在你的项目中，创建一个 .scss 文件。例如，创建一个 styles/main.scss 文件。

// styles/main.scss
$primary-color: #42b983;

body {
  background-color: $primary-color;
}

2. 在 Vue 组件中，使用 lang="scss" 来引用 Scss：

<template>
  <div class="container">
    <h1>Welcome to Vite with Sass/Scss!</h1>
  </div>
</template>

<script setup>
  // Vue component logic
</script>

<style scoped lang="scss">
  .container {
    padding: 20px;
    background-color: $primary-color;
  }
</style>

3. 如果你想全局使用 Sass 变量，可以在 vite.config.js 中进行配置：

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`,  // 自动引入变量
      },
    },
  },
});

这样，你可以在所有的 .scss 文件中使用全局变量而不需要每次导入。

使用 CSS Modules

Vite 默认支持 CSS Modules，因此你只需要在组件中使用模块化的样式。

1. 创建一个 CSS 文件并使用 .module.css 或 .module.scss 后缀，例如 Button.module.scss：

// styles/Button.module.scss
.button {
  background-color: #42b983;
  color: white;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #35495e;
}

2. 在 Vue 或 React 组件中，使用该样式：

<template>
  <button :class="$style.button">Click Me</button>
</template>

<script setup>
  // Vue component logic
</script>

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

在 React 中，你可以通过 import styles from './Button.module.scss'; 来导入模块化样式。

import styles from './Button.module.scss';

const Button = () => (
  <button className={styles.button}>Click Me</button>
);

通过 CSS Modules，样式会自动生成局部作用域，避免全局污染。

3. 使用静态资源

在项目中使用图片、字体、图标等静态资源，可以通过 Vite 内置的静态资源处理机制来优化这些资源。

1. 将图片或字体文件放入 public 目录（或 src/assets）。

例如，放置一张图片 public/images/logo.png。

2. 在组件中引用静态资源：

<template>
  <img src="/images/logo.png" alt="Logo" />
</template>

3. 如果你希望通过 import 语句引入静态资源并进行处理（如压缩、缓存等），可以放置资源到 src/assets 目录，并使用 import：

<template>
  <img :src="logo" alt="Logo" />
</template>

<script setup>
import logo from '../assets/logo.png';  // 使用 import 语句
</script>

Vite 会自动处理图片、字体等资源，并且支持在构建时进行优化和压缩。

4. 生产环境 Tree Shaking

Tree Shaking 是一种优化技术，可以通过静态分析代码，去除未使用的代码，从而减少最终打包文件的体积。Vite 内置了基于 ESBuild 的 Tree Shaking 支持。

4.1 确保使用 ES6 模块

Tree Shaking 依赖于 ES6 模块的静态分析，因此确保项目中使用 import 和 export 语法，而不是 require 和 module.exports。

4.2 配置生产环境优化

Vite 在生产环境下会自动进行 Tree Shaking 和代码优化，你只需确保使用了合适的生产构建配置。

1. 在 vite.config.js 中启用生产环境优化：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    minify: 'terser',  // 使用 terser 进行压缩
    terserOptions: {
      compress: {
        dropConsole: true,  // 去除 console.log
      },
    },
  },
});

2. 在生产构建时，Vite 会默认进行 Tree Shaking，去除未使用的代码。你可以通过以下命令进行生产环境构建：

npm run build

Vite 会根据你的代码使用情况和模块依赖，自动移除无用的代码。

4.3 使用动态导入

对于大型应用，可以使用动态导入来实现按需加载，进一步减少初始加载体积。可以使用 import() 函数来动态加载模块：

// 使用动态导入来按需加载某个模块
const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

这种方式配合 Tree Shaking 和代码分割可以使得生产环境的构建更加高效。

vite+vue实例--小米商城的构建

具体代码

实现效果