Vite|Vite 入门 & 知识点分享 Vite入门&知识点分享

Home | Vite 官方中文文档

社区插件：https://github.com/vitejs/awe...
使用感受：Vite 实质是对各场景下的最佳方案的整合

react 常用配置

import { defineConfig } from "vite"; import path from "path"; import reactRefresh from "@vitejs/plugin-react-refresh"; import usePluginImport from "vite-plugin-importer"; export default defineConfig({ resolve: { alias: { app: path.resolve(__dirname, "./src"), }, }, plugins: [ reactRefresh(), { ...usePluginImport({ libraryName: "xxx/ui", libraryDirectory: "es/components", customName: (name) => { return `@byte-design/ui/es/components/${name.replace( name[0], name[0].toLowerCase() )}`; }, // @ts-ignore usePluginImport 支持，但是类型约束不正确 transformToDefaultImport: false, camel2DashComponentName: false, style: false, }), apply: "build", }, { ...usePluginImport({ libraryName: "xxx/icons", libraryDirectory: "icons", style: false, camel2DashComponentName: false, }), apply: "build", }, { ...usePluginImport({ libraryName: "xxx/hooks", libraryDirectory: "lib", style: false, camel2DashComponentName: false, }), apply: "build", }, ], build: { lib: { entry: path.resolve(__dirname, "src/index.ts"), name: "brand_components", }, // minify: false, sourcemap: true, rollupOptions: { external: [ "axios", "react", "react-router-dom", "react-dom", /\xxx\/ui/, /\xxx\/icons/, /\xxx\/hooks/, ], }, }, });

知识点
Es Module

import - JavaScript | MDN
兼容支持绝大多数现代游览器

静态引入

// html Document

// module1.js import { c1 } from './module2.js'; console.log(c1())// module2.js import { count } from "./module3.js"; export const c1 = () => { return count; };

动态引入

export const c2 = () => { import("./module4.js").then((res) => { console.log(res.count2); }); };

引申：React 组件动态引入
意义：将一些使用场景较少的组件动态引入，减少核心代码的体积

import React, { Suspense, lazy, useState } from 'react'; const Head = lazy(() => { return import('@byted/brand-components').then((res) => { return { default: res.Head, }; }); }); const Loading = () => { return loading; }; const LoadHead = () => { return (console.log(11)} ssoUrl="dasd" projectType="aegir" />); }; export default LoadHead;

【Vite|Vite 入门 & 知识点分享】[React lazy/Suspense使用及源码解析
](https://zhuanlan.zhihu.com/p/...)
引申：Commonjs 的动态加载 - 打包的时候如何动态识别文件管理依赖 | webpack 中文网
对于，ES Module来说，这需要经历三个步骤：

构造 - 查找、下载并解析所有文件到模块记录中
实例化 - 在内存中寻找一块区域来存储所有导出的变量（但还没有填充值）。然后让 export 和 import 都指向这些内存块。这个过程叫做链接（linking）
求值 - 在内存块中填入变量的实际值。
漫画：深入浅出 ES 模块

循环引用

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

esbuild

node_modules 模块的处理(将node_modules 请求路径带上 @modules 标识，通过请求代理找到对应的三方模块)

依赖预构建

Vite 会将 package.json 中生产依赖 dependencies 进行预构建
兼容 CommonJS 和 AMD 模块的依赖
- 因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的，所以对于使用的依赖如果是 CommonJS 或 AMD 的模块，则需要进行模块类型的转化（ES Module）。
1. 减少模块间依赖引用导致过多的请求次数
预构建产物
https://juejin.cn/post/693040...

使用问题由于esbuild 不能忽略三方包的虚拟依赖，导致开发构建错误

例如虚拟滚动： react-virtualized
issue: https://github.com/bvaughn/re...

// node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js // 这个为虚拟引入 import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";

解决方案：

通过 patch-package 对 react-virtualized 打一个本地补丁，将虚拟引用给注释，在开发中才有此问题，在打包发布中没有此问题，所以通过补丁解决开发问题，基本无风险
按需引入

Vite 社区有多个 import 插件，多多少少都有一些问题（没有完整的支持babel-import-plugin 的配置）
最终选择： vite-plugin-importer （内部使用 babel-import-plugin）
vite-plugin-importer 问题
Option 类型不完善，配置 transformToDefaultImport 报类型错误
customName 默认大写，需要自行处理
项目配置如下：

import usePluginImport from "vite-plugin-importer"; plugins: [ reactRefresh(), { ...usePluginImport({ libraryName: "xxxx/ui", libraryDirectory: "es/components", customName: (name) => { return `xxx/ui/es/components/${name.replace( name[0], name[0].toLowerCase() )}`; }, // @ts-ignore usePluginImport 支持，但是类型约束不正确 transformToDefaultImport: false, camel2DashComponentName: false, style: false, }), apply: "build", }, { ...usePluginImport({ libraryName: "xxx/icons", libraryDirectory: "icons", style: false, camel2DashComponentName: false, }), apply: "build", }, ],

外部依赖问题