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 Moduleimport - JavaScript | MDN兼容 反对绝大多数古代游览器动态引入// html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <script src="module1.js" type="module"></script> </body></html>// module1.jsimport { c1 } from './module2.js';console.log(c1())// module2.jsimport { 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 <div>loading</div>;};const LoadHead = () => { return ( <Suspense fallback={Loading}> <Head handleLangChange={() => console.log(11)} ssoUrl="dasd" projectType="aegir" /> </Suspense> );};export default LoadHead;[React lazy/Suspense应用及源码解析](https://zhuanlan.zhihu.com/p/...)
...