ViteJS 预构建理解及流程解析

简介

ViteJS 是一款基于 ES modules 构建的前端开发工具，它具有快速的开发速度和优秀的开发体验。其中，预构建是 ViteJS 的重点特性之一。

预构建，即根据源代码提前展开模块之间的依赖关系，以在后续的开发过程中减少许多不必要的耗时和额外请求。具体而言，预构建会将每个模块和它所依赖的模块转化为一个 JavaScript 文件，以便在应用程序运行时直接使用，而无需像传统打包工具在打包时进行代码分割。

流程

ViteJS 的预构建分为两个步骤：

从 HTML 文件中获取入口文件
分析入口文件的依赖关系，构建预构建文件

接下来，将对这两个步骤进行详细说明。

获取入口文件

在 ViteJS 中，入口文件通常是指在 HTML 文件中引入的 JavaScript 文件。ViteJS 通过查找 HTML 文件中的 script 标签，在其中查找 type 属性为 module 的标签作为入口文件。

在默认情况下，src/index.html 文件会做为默认入口文件进行处理，你也可以在 vite.config.js 中配置其他的 HTML 文件或特定的脚本文件。

分析入口文件的依赖关系，构建预构建文件

当 ViteJS 获取了入口文件之后，需要进行分析和预构建操作。分析过程通常由三个步骤完成：

识别依赖项
为每个模块创建动态 import 语句
合并相邻模块的依赖树

在分析完依赖项之后，ViteJS 将每个模块和它所依赖的模块部分预构建输出为单个 JavaScript 文件，以便于在浏览器中快速加载。

示例

示例1：加载公共模块

假设我们现在有一个 Vue 应用程序，其中多个 Vue 组件都使用了某些公共方法 utils.js。通过使用 ViteJS 的预构建特性，我们可以将 utils.js 提前合并为一个单独的供多个组件使用的 JavaScript 文件，以优化应用程序首次加载时间。

在 src/utils.js 文件中定义如下代码：

export function hello () {
  return "Hello ViteJS";
}

在 src/main.js 文件中，我们将使用 utils.js 文件中定义的方法。

import { hello } from './utils.js';
console.log(hello());

在 index.html 文件中，引入入口脚本文件。

<body>
  <script type="module" src="/src/main.js"></script>
</body>

通过运行 npm run dev 命令，我们可以启动 ViteJS，并应该可以在控制台中看到输出了 "Hello ViteJS" 信息。

示例2：延迟加载模块

假设我们现在有一个 Vue 应用程序，其中包含若干个组件，其中一些组件只有在特定条件下才会被加载并显示。使用传统的打包工具，这些组件通常会被打包在同一个文件中，如 app.js，导致许多不必要的加载时间。

通过使用 ViteJS 的预构建特性，我们可以将这些组件分离为单独的文件，并在需要时才进行加载。在此过程中，我们可以将这些组件作为动态 import 语句进行加载，在确保实际需要时才去执行相关操作，以在加载时间和性能方面达到最优化的目标。

在 src/components/LazyLoading.vue 组件文件中定义如下代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Lazy Loaded' }
  }
}
</script>

在 src/components/EagerLoading.vue 组件文件中定义如下代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return { message: 'Eager Loaded' }
  }
}
</script>

在 src/main.js 文件中，我们将通过路由控制，延迟加载 LazyLoading 组件，并立即载入 EagerLoading 组件。

import { createRouter, createWebHistory } from 'vue-router';

const routerHistory = createWebHistory();
const routes = [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "eager_layout" */ './layouts/EagerLoading.vue'),
    children: [
      {
        path: '/lazy-loading',
        component: () => import(/* webpackChunkName: "lazy_loading" */ './components/LazyLoading.vue')
      }
    ]
  }
]

const router = createRouter({
  history: routerHistory,
  routes: routes
})

app.use(router)

启动 ViteJS，完成路由跳转之后，我们可以看到 "Lazy Loaded" 和 "Eager Loaded" 信息分别在路由切换时异步加载并展示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vitejs预构建理解及流程解析 - Python技术站