Vite知识体系笔记 | 青训营

DYL
119 阅读5分钟

Vite基本概要

Vite是一个由尤雨溪（Evan You）创建的现代化构建工具。它旨在提供更快的开发体验，并优化了项目的构建速度。Vite运行在现代浏览器中，并利用了浏览器原生的ES模块加载功能，使得在开发过程中无需事先将所有代码打包，从而加快了项目的启动速度。

下面是Vite的一些核心概念和特点：

  1. 快速的冷启动：Vite利用了浏览器原生的模块导入功能，以及其对ES模块的支持，可以在开发过程中快速加载和解析代码，使得冷启动时间大大减少。
  2. 热模块替换（HMR）：Vite支持热模块替换，可以在开发过程中实时更新代码，而无需刷新整个页面。这个功能能够极大地提升开发效率。
  3. 预构建：Vite可以在开发过程中预先构建和缓存模块，以减少浏览器在加载时的处理时间，从而进一步提高开发速度。
  4. 插件系统：Vite提供了一个灵活的插件系统，可以通过插件来扩展其功能。您可以轻松地配置和使用各种插件，以满足您项目的需求。
  5. Vue生态系统集成：Vite是由Vue.js的创作者开发的，并且与Vue生态系统紧密集成。您可以直接使用Vite构建Vue应用，并享受与Vue CLI类似的开发体验。
    1.前端为什么需要构建工具

    模块化，资源编译，产物质量，开发效率

3b88823e27bb87cd29e71c7ac91f052.png 2.vite是什么，why

no-bundle开发服务，源文件无需打包 生产环境基于rollup的bundle 高性能、简单易用 瓶颈：bundle带来的性能开销，js语言的性能瓶颈

3.浏览器原生ESM支持

两大要素：script标签增加type="module"属性、使用ESM模块导入导出语法

原生esm开发服务优势：无需打包项目源代码，天然的按需加载，可以利用文件级的浏览器缓存

4.esbuild

打包器bundler，编译器transformer，压缩器minifier

5.关键技术：单文件编译

esbuild编译ts、jsx

优势：编译速度10-100x

局限：不支持类型检查，不支持语法降级es5

在Vite中，单文件组件（SFC）是一种将组件的模板、样式和逻辑封装在一个文件中的技术。通过单文件组件，我们可以在一个文件中编写和管理组件的所有相关代码。接下来我将通过代码和文字来解释在Vite中如何进行单文件编译。

首先，让我们创建一个简单的单文件组件。例如，我们创建一个名为"HelloWorld.vue"的文件，代码如下：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vite!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!';
    }
  }
};
</script>

<style>
h1 {
  color: blue;
}
</style>

上述代码定义了一个简单的单文件组件，包括模板、脚本和样式。在模板中，我们展示了一个标题和一个按钮，并使用了message变量。脚本部分定义了data属性和changeMessage方法，样式部分定义了标题的颜色。

接下来，我们在一个入口文件中使用该单文件组件。在入口文件中创建一个名为"main.js"的文件，代码如下：

import { createApp } from 'vue';
import App from './HelloWorld.vue';

createApp(App).mount('#app');

在上述代码中，我们使用createApp函数创建了一个Vue应用，并将App组件（即HelloWorld.vue）作为根组件进行挂载。Vite会根据单文件组件的代码自动进行编译和模块解析，将其转换为浏览器可识别的代码。

6.关键技术：代码压缩

esbuild默认压缩工具，替换传统的terser，uglify.js压缩工具

首先，让我们使用一个插件来压缩代码。通过安装插件并配置Vite，我们可以在构建过程中启用代码压缩。以下是实现代码压缩的步骤：

  1. 安装插件：在终端中，切换到项目目录并执行以下命令安装@vitejs/plugin-legacy插件：
npm install @vitejs/plugin-legacy --save-dev
  1. 在Vite配置中启用插件：在项目根目录中，创建一个名为vite.config.js的文件，然后将以下代码添加到文件中：
import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
});

上述代码将@vitejs/plugin-legacy插件导入并添加到Vite的插件配置中。在插件配置中，我们指定了目标浏览器，例如defaults和不支持IE 11

7.关键技术：插件技术

开发阶段 模拟rollup插件机制

生产环境 直接使用rollup

首先，让我们创建一个简单的Vite插件。假设我们希望在打包过程中，在控制台输出一条消息。以下是实现这个需求的步骤：

  1. 创建插件文件：在项目根目录中，创建一个名为my-plugin.js的文件，并添加以下代码：
export default function myPlugin() {
  return {
    name: 'my-plugin',
    apply: 'build',

    transform(code) {
      console.log('Plugin: Code Transformation');
      return code;
    },

    generateBundle() {
      console.log('Plugin: Bundle Generation');
    }
  };
};

上述代码定义了一个名为myPlugin的插件。插件需要导出一个默认函数，该函数返回一个包含name、apply、transform和generateBundle属性的对象。其中，name是插件的名称，apply指定插件应用的阶段，transform在代码转换阶段进行操作，generateBundle在生成捆绑包阶段进行操作。

  1. 注册插件：在vite.config.js文件中，导入插件并将其添加到插件配置中。修改文件如下：
import { defineConfig } from 'vite';
import myPlugin from './my-plugin.js';

export default defineConfig({
  plugins: [
    myPlugin()
  ]
});

上述代码中，我们将myPlugin插件导入，并将其作为函数调用以实例化插件对象。

8.vite路线

语法安全降级、服务端渲染ssr、深入了解底层标准

avatar
文章
阅读
粉丝