Vite 基础笔记 02

已注销
246 阅读3分钟

Vite 基础笔记 02

NPM 依赖解析和预构建

首次运行的时候会出现 Pre-bundling dependencies ：当依赖或者配置文件发生改变的时候就会执行预构建。

image.png

依赖预构建 过程实现的两个目的：

  • CommonJs 和 UMD 兼容性
    • import { someMethod } from 'my-dep
    • 在开发过程中，vite 的开发服务会将所有代码视为原生的 ES 模块，vite 必须现将 Commonjs 和 UMD 的发布的依赖项转换为 ESM，转换 CommonJS 依赖的时候，vite 会执行智能的导入分析，即使是动态的导入分配也能达到预期的效果。
  • 性能方面
    • import { debounce } from 'loadsh-es'
    • vite 会将许多内部的模块的 EMS 依赖关系转化为单个的模块，以提高后续页面加载的性能。

原生 ES 导入不支持这样的裸模块导 import { someMethod } from 'my-dep' 代码会在浏览器中抛出一个错误。Vite 将会检测到所有被加载的源文件中的此类裸模块导入。

一、预构建可以提高页面加载速度，并将 CommonJS / UMD 转换为 ESM 格式。预构建这一步由esbuild执行，这使得 Vite 的冷启动时间比任何基于 JavaScript 的打包器都要快得多。

二、重写导入为合法的 URL，例如 /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd 以便浏览器能够正确导入它们。

依赖是强缓存的 ：Vite 通过 HTTP 头来缓存请求得到的依赖。

依赖于构建的 esbuild 与缓存

esbuild 介绍

  • 极快的速度且不需要缓存
  • ES6 和 CommonsJS 模块支持
  • ES6 模块的 tree shaking
  • 一个用于JavaScript 和 Go 的 API
  • TypeScript 和 JSX 语法支持
  • Source maps 支持
  • 简化打包
  • 插件支持

缓存

  1. 文件系统缓存
    • Vite 会将预构建的依赖缓存到 node_modules/.vite
    • 重新运行预构建：
      • package.json 中的 dependencies 列表
      • 包管理器的lockfile，例如 package-lock.json, yarn.lock，或者 pnpm-lock.yaml
      • vite.config.js 相关字段中配置
  • 只有在上述其中一项发生更改时，才需要重新运行预构建
  1. 文件系统缓存
    • 解析后的依赖请求会以 HTTP 头 max-age=31536000,immutable 强缓存
    • 禁用和清缓存：
      • 通过浏览器调试工具的 Network 选项卡暂时禁用缓存；
      • 重启 Vite dev server，并添加 --force 命令以重新构建依赖；
      • 重新载入页面。

模块热重载

热重载： 是一个可以允许开发者在应用程序运行时更改源代码,并立即看到效果的关键功能。

热更新 API

首先需要创建一个纯 js 的 vanilla 项目。

必需的条件守卫：首先，请确保用一个条件语句守护所有 HMR API 的使用，这样代码就可以在生产环境中被 tree-shaking 优化：

if (import.meta.hot) { 
    // HMR 代码 
}

hot.accept(cb)

要接收模块自身，应使用 import.meta.hot.accept，参数为接收已更新模块的回调函数：

image.png

当修改 count 的值 控制台将会打印

image.png

hot.dispose(cb)

一个接收自身的模块或一个期望被其他模块接收的模块可以使用 hot.dispose 来清除任何由其更新副本产生的持久副作用：

function setupSideEffect() {} 

setupSideEffect() 

if (import.meta.hot) { 
    import.meta.hot.dispose((data) => { 
        // 清理副作用 
    }) 
}

hot.invalidate()

调用 import.meta.hot.invalidate() 只是重新加载页面。

hot.decline()

调用 import.meta.hot.decline() 表示此模块不可热更新，如果在传播 HMR 更新时遇到此模块，浏览器应该执行完全重新加载。

  • itle: Vite 基础笔记 02
  • @Content: Vite
  • @Autor: ling.wang
  • @StudyDate: 2022-07-14
  • @WritingDate: 2022-07-14
avatar
文章
阅读
粉丝