Vite 基础理解及应用

概要

Vite基础知识点

1. 快速启动和热更新

• Vite利用浏览器原生ES模块的支持实现快速启动。在开发模式下，它不需要像传统构建工具那样进行完整的项目构建。当启动开发服务器时，Vite仅需启动一个轻量级的服务器，然后根据浏览器请求按需加载模块。
• 热更新方面，Vite的HMR（热模块替换）非常高效。当修改代码时，它能准确地更新变化的模块，保持应用的当前状态，极大地提高了开发效率。例如，在修改一个Vue组件的样式或方法时，页面不会重新加载，组件会即时更新。

热更新原理

1. 基于ES模块的依赖追踪
   • Vite利用了浏览器对ES模块的原生支持。在开发模式下，浏览器请求的每个模块都有一个对应的URL。例如，当浏览器加载一个JavaScript模块（如main.js）时，Vite的开发服务器会根据这个请求找到对应的文件并返回。
   • 每个ES模块都可以通过import和export语句来声明依赖关系。Vite会解析这些模块的依赖，构建一个依赖图。例如，main.js可能会导入componentA.js和util.js，Vite会记录这种依赖关系。当componentA.js或util.js发生变化时，Vite可以通过这个依赖图快速定位到哪些模块会受到影响。
2. Websocket通信实现实时更新
   • Vite在开发服务器和浏览器之间建立了一个Websocket连接。当文件发生修改时，开发服务器会通过这个Websocket连接向浏览器发送更新消息。
   • 这个更新消息包含了修改的文件信息和更新类型（如样式更新、脚本更新等）。例如，当修改了一个CSS文件，服务器会发送消息告诉浏览器需要更新对应的样式，浏览器收到消息后，会根据消息内容采取相应的更新策略。
3. 模块热替换（HMR）策略
   • 样式更新：
     • 对于CSS样式的更新，Vite采用的策略相对简单直接。当CSS文件发生变化时，服务器发送更新消息给浏览器，浏览器会重新请求新的CSS文件内容，并将其应用到页面上，从而实现样式的即时更新。这种更新不会引起页面的重新加载，用户可以立即看到样式变化后的效果。
   • 脚本更新：
     • 对于JavaScript模块的更新，Vite会根据模块的类型和更新内容采取不同的策略。如果是一个纯函数模块（如工具函数模块）更新，Vite会尝试用新的模块内容替换旧的模块内容，同时保持引用这个模块的其他模块的状态不变。
     • 如果是一个组件模块更新，Vite会重新执行更新后的组件模块代码，更新组件的渲染函数或生命周期函数等，然后将更新后的组件重新渲染到页面上。在这个过程中，会尽可能地保留组件的状态，例如，组件中的data属性值（如果是Vue组件）或useState钩子的值（如果是React组件）等会尽量保持不变，从而实现平滑的更新。
4. 缓存机制辅助更新
   • Vite在开发过程中会对已经加载过的模块进行缓存。当收到更新消息时，它会先检查缓存中的模块信息。如果缓存中的模块与更新后的模块有关联，Vite会根据更新内容和缓存信息来优化更新过程。
   • 例如，一个被多个组件引用的工具模块发生了变化，Vite可以利用缓存信息快速确定哪些组件引用了这个模块，然后只对这些相关组件进行更新，而不是重新加载所有组件，提高了更新效率。

2. 基于ES模块的构建

• Vite基于ES模块构建项目。这意味着在开发过程中，可以直接在浏览器中使用原生的import和export语法。这种方式使得代码的依赖关系更加清晰，同时也便于浏览器进行优化。在生产构建时，Vite会将这些ES模块转换为适合生产环境的格式。

3. 对不同前端框架的支持

• Vite对多种前端框架有很好的支持，如Vue、React、Preact等。对于Vue3，它与Vue的响应式系统和组件模型完美配合。通过相应的插件（如@vitejs/plugin - vue），可以轻松地在Vite项目中开发Vue3应用。

vite.config.js配置实例

1. 基本结构

以下是一个简单的vite.config.js文件的基本结构：

import { defineConfig } from 'vite';
export default defineConfig({
    // 配置项将写在这里
});

2. 服务器相关配置

• 端口配置
  可以指定开发服务器的端口号，例如将端口设置为8080：

server: {
    port: 8080
}

• 跨域配置
  如果需要解决开发环境中的跨域问题，可以配置服务器代理。假设后端API服务器在http://localhost:3000/api，以下是一个代理配置示例：

server: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
        }
    }
}

3. 输入输出路径配置

• 输入路径（项目入口）
  默认情况下，Vite以index.html为入口。如果需要指定其他入口文件，可以这样配置（不过这种情况比较少见）：

build: {
    rollupOptions: {
        input: 'src/main.js'
    }
}

• 输出路径（构建目录）
  可以指定构建后的文件输出目录，例如将输出目录设置为dist-build：

build: {
    outDir: 'dist-build'
}

4. 打包优化配置

• 压缩配置
  在生产构建时，可以配置代码压缩。Vite默认使用terser进行JavaScript压缩。以下是开启压缩并设置一些压缩选项的示例：

build: {
    minify: 'terser',
    terserOptions: {
        compress: {
            drop_console: true,
            drop_debugger: true
        }
    }
}

• 静态资源处理优化
  对于静态资源（如图片、字体等），可以配置优化选项。例如，设置图片的最大尺寸，超过该尺寸的图片将被压缩：

build: {
    assetsInlineLimit: 4096 // 单位为字节，这里表示4KB
}

• Vue3项目打包优化相关配置（结合Vite）
  • Tree - Shaking
    Vue3项目在Vite中可以很好地利用Tree - Shaking来去除未使用的代码。确保在package.json中正确配置依赖，Vite会自动处理。例如，如果只使用了Vue3的部分功能，未使用的模块不会被打包。
  • 模块分割优化
    对于Vue3的大型应用，可以配置Vite进行更精细的模块分割。比如，将不同路由对应的组件拆分成单独的模块，在路由切换时按需加载。以下是一个简单的路由级代码分割示例（假设使用Vue Router）：

    const Home = () => import('./views/Home.vue');
    const About = () => import('./views/About.vue');
    const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About }
    ];
    

    在vite.config.js中，可以进一步优化这种分割：

    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    'home - chunk': [ './views/Home.vue' ],
                    'about - chunk': [ './views/About.vue' ]
                }
            }
        }
    }
    

这些配置可以根据项目的实际需求进行调整和扩展，以达到最佳的开发和生产构建效果。

项目构建

一、项目初始化

1. 创建项目目录
   • 首先，创建一个新的项目文件夹，例如my-vite-project。
   • 在命令行中可以使用mkdir my-vite-project（在类Unix系统中）来创建目录。
2. 安装Vite
   • 进入项目目录后，通过npm init vite@latest命令来初始化一个Vite项目。
   • 执行该命令后，会提示你输入项目名称、选择框架（如Vue、React、Preact等）和变体（如JavaScript或TypeScript）。
   • 例如，如果你选择Vue和JavaScript，Vite会自动为你创建一个基本的Vue项目结构，其中包含package.json文件（用于管理项目依赖）、index.html（HTML入口文件）、src文件夹（包含主要的JavaScript/TypeScript和CSS等源文件）等。
3. 安装依赖并启动项目
   • 完成项目初始化后，在项目目录下运行npm install来安装所有必要的依赖。
   • 然后使用npm run dev命令启动开发服务器。Vite会在本地启动一个开发服务器，通常默认端口是5173，你可以在浏览器中访问http://localhost:5173来查看项目。

二、项目结构理解

1. index.html文件
   • 这是项目的HTML入口文件。与传统的构建工具不同，Vite直接使用这个HTML文件作为入口，而不是通过JavaScript入口文件来隐式引用HTML。
   • 在index.html中，你会看到类似<script type="module" src="/src/main.js"></script>的代码。这里的type="module"表示这是一个JavaScript模块，Vite利用浏览器原生的ES模块支持来加载和处理这些模块。
2. src文件夹
   • src/main.js（如果是Vue项目）或者src/index.js（如果是其他框架或纯JavaScript项目）通常是项目的主要JavaScript入口文件。
   • 这个文件可能会导入其他组件、样式或工具函数等。例如，在Vue项目中，它会创建一个Vue应用并挂载到id为app的DOM元素上，代码可能如下：

   import { createApp } from 'vue';
   import App from './App.vue';
   const app = createApp(App);
   app.mount('#app');
   

   • src文件夹还可能包含其他组件文件（如.vue文件用于Vue项目）、样式文件（.css、.scss等）和其他辅助的JavaScript文件。

三、CSS处理

1. 导入CSS文件
   • 在JavaScript文件中，可以很方便地导入CSS文件。例如，在main.js中可以这样导入一个styles.css文件：

   import './styles.css';
   

   • 当Vite处理这个导入时，它会将CSS文件的内容以适当的方式注入到HTML文件中，确保样式能够正确应用。
2. CSS预处理器支持
   • Vite支持CSS预处理器，如Sass（.scss）和Less（.less）。
   • 要使用Sass，首先需要安装sass依赖（npm install - - save - dev sass）。
   • 然后就可以在项目中创建.scss文件，并像导入普通CSS文件一样在JavaScript文件中导入它们。例如，import './styles.scss';。

四、静态资源处理

1. 导入图片等资源
   • 在Vite项目中，可以直接在JavaScript或CSS文件中导入图片、字体等静态资源。
   • 例如，在一个Vue组件中导入一张图片：

   <template>
       <img :src="imageUrl" alt="My Image">
   </template>
   <script>
   import myImage from './my - image.png';
   export default {
       data() {
           return {
               imageUrl: myImage
           };
       }
   };
   </script>
   

   • Vite会自动处理这些资源的路径，并将它们正确地复制到构建后的输出目录中。
2. 公共文件夹（public）
   • 项目中的public文件夹用于存放一些不需要经过Vite处理的静态资源。
   • 这些资源可以通过相对于index.html的路径直接访问。例如，如果你在public文件夹中有一个logo.png文件，你可以在index.html中通过<img src="/logo.png" alt="Logo">来访问它。

五、构建项目用于生产环境

1. 构建命令
   • 当项目开发完成后，需要将项目构建为可以在生产环境部署的版本。在Vite中，可以使用npm run build命令来进行构建。
   • Vite会将项目中的代码进行优化，包括压缩JavaScript和CSS文件、处理静态资源的路径等操作。
2. 构建输出目录
   • 构建后的文件会存放在dist目录（默认情况下）。这个目录中的文件可以直接部署到Web服务器上，供用户访问。
   • 例如，index.html文件会被更新，其中的脚本和样式引用会指向构建后的JavaScript和CSS文件，并且这些文件会被压缩和优化以提高性能。