Skip to content

Commit 0b3d69a

Browse files
mengxinssfdmengxinssfd
committed
chore(react-ui): 打包优化
1. iife 打包与 es、cjs 打包模式分离 2. 添加打包依赖分析 3. 修复会打包 jsx-runtime 依赖的问题 4. es、cjs 打包排除 @tool-pack/types、@tool-pack/basic、@tool-pack/dom、rxjs，使用依赖代替打包 5. iife 打包会将 react、react-dom 之外的必要依赖都打包进去，减少不必要的 script 导入 6. 使用 vite 插件把 process.env.NODE_ENV 直接替换为 production 7. 组件库的依赖包含 @tool-pack/types、@tool-pack/basic、@tool-pack/dom、rxjs
1 parent 0265c7e commit 0b3d69a

File tree

6 files changed

+197
-90
lines changed

6 files changed

+197
-90
lines changed

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,6 @@
5656
"devDependencies": {
5757
"@commitlint/cli": "^17.7.1",
5858
"@commitlint/config-conventional": "^17.7.0",
59-
"dumi-theme-antd-style": "^0.31.0",
6059
"@rollup/plugin-json": "^6.0.0",
6160
"@testing-library/jest-dom": "^6.1.2",
6261
"@testing-library/react": "^14.1.2",
@@ -74,12 +73,13 @@
7473
"@typescript-eslint/eslint-plugin": "5.62.0",
7574
"@typescript-eslint/parser": "5.62.0",
7675
"@umijs/lint": "^4.2.6",
77-
"@vitejs/plugin-react": "^4.2.1",
76+
"@vitejs/plugin-react": "^4.3.1",
7877
"autoprefixer": "^10.4.15",
7978
"chalk": "^5.3.0",
8079
"conventional-changelog-cli": "^3.0.0",
8180
"cssnano": "^6.0.1",
8281
"dumi": "~2.2.17",
82+
"dumi-theme-antd-style": "^0.31.0",
8383
"enquirer": "^2.4.1",
8484
"eslint": "8.47.0",
8585
"eslint-config-prettier": "^9.0.0",
@@ -103,6 +103,7 @@
103103
"rollup": "^3.28.1",
104104
"rollup-plugin-dts": "^6.0.0",
105105
"rollup-plugin-typescript2": "^0.35.0",
106+
"rollup-plugin-visualizer": "^5.12.0",
106107
"rxjs": "^7.8.1",
107108
"sass": "^1.66.1",
108109
"serve": "^14.2.1",
@@ -114,7 +115,8 @@
114115
"stylelint-scss": "^5.1.0",
115116
"tsc-alias": "^1.8.7",
116117
"typescript": "^5.4.5",
117-
"vite": "^5.0.10",
118+
"vite": "^5.2.13",
119+
"vite-plugin-replace": "^0.1.1",
118120
"yalc": "1.0.0-pre.53"
119121
},
120122
"browserslist": {

‎packages/react-ui/package.json

+9-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
"scripts": {
66
"rm:dist": "rimraf ./dist",
77
"build": "npm run build:vite && npm run build:dts && npm run build:scss && npm run build:postcss && npm run build:locale",
8-
"build:vite": "vite build",
8+
"build:vite": "npm run build:vite:es-cjs && npm run build:vite:iife",
9+
"build:vite:es-cjs": "vite build -c vite.config.ts",
10+
"build:vite:iife": "vite build -c vite.config.iife.ts",
11+
"analyze:es": "vite build -c vite.config.ts --mode analyze",
12+
"analyze:iife": "vite build -c vite.config.iife.ts --mode analyze",
913
"build:scss-single": "tsx scripts/scss-single-file.ts",
1014
"build:scss": "sass src/index.scss dist/index.css --no-source-map && npm run build:scss-single",
1115
"build:postcss": "postcss --config ./postcss.config.js dist/index.css -o dist/index.css",
@@ -51,11 +55,10 @@
5155
"LICENSE"
5256
],
5357
"dependencies": {
54-
"@tool-pack/types": "^0.2.0"
55-
},
56-
"devDependencies": {
57-
"react": "^18.2.0",
58-
"react-dom": "^18.2.0"
58+
"@tool-pack/types": "^0.3.0",
59+
"@tool-pack/basic": "^0.9.1",
60+
"@tool-pack/dom": "^0.4.0",
61+
"rxjs": "^7.8.1"
5962
},
6063
"peerDependencies": {
6164
"react": "^18.2.0",

‎packages/react-ui/vite.config.iife.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { getCommonViteConfig, getBanner } from './vite.utils';
2+
import { type UserConfig, defineConfig } from 'vite';
3+
4+
/**
5+
* Vite configuration
6+
* https://vitejs.dev/config/
7+
*/
8+
export default defineConfig((): UserConfig => {
9+
const config = getCommonViteConfig({
10+
output: [
11+
{
12+
globals: {
13+
'react-dom': 'ReactDOM',
14+
react: 'React',
15+
},
16+
entryFileNames: '[name].iife.js',
17+
banner: getBanner('iife'),
18+
name: 'ToolPackReactUI',
19+
format: 'iife',
20+
},
21+
],
22+
external: ['react', 'react-dom'],
23+
});
24+
config.build.emptyOutDir = false;
25+
return config;
26+
});

‎packages/react-ui/vite.config.ts

+34-67
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,42 @@
1-
import { defineConfig, UserConfig } from 'vite';
2-
import react from '@vitejs/plugin-react';
3-
import { getAlias } from '../../utils';
4-
import pkg from './package.json';
5-
import { resolve } from 'path';
1+
import { getCommonViteConfig, getBanner } from './vite.utils';
2+
import type { UserConfig } from 'vite';
3+
import { defineConfig } from 'vite';
64

7-
function getBanner(format: string) {
8-
const date = new Date();
9-
return (
10-
'/*!\n' +
11-
` * ToolPackReactUI(${pkg.name}) v${pkg.version}\n` +
12-
` * Author: ${pkg.author}\n` +
13-
` * Documentation: ${pkg.homepage}\n` +
14-
` * License: ${pkg.license}\n` +
15-
` * File: index.${format}.js\n` +
16-
` * Date: ${date.getFullYear()}-${
17-
date.getMonth() + 1
18-
}-${date.getDate()}\n` +
19-
` */\n`
20-
);
21-
}
22-
23-
const entryPath = resolve(__dirname, './src/index.ts');
5+
type Output = Exclude<
6+
Exclude<UserConfig['build'], undefined>['rollupOptions'],
7+
undefined
8+
>['output'];
249
/**
2510
* Vite configuration
2611
* https://vitejs.dev/config/
2712
*/
28-
export default defineConfig((): UserConfig => {
29-
return {
30-
build: {
31-
rollupOptions: {
32-
output: [
33-
{
34-
globals: {
35-
'react-dom': 'ReactDom',
36-
react: 'React',
37-
},
38-
entryFileNames: '[name].iife.js',
39-
banner: getBanner('iife'),
40-
name: 'ToolPackReactUI',
41-
format: 'iife',
42-
},
43-
{
44-
entryFileNames: '[name].es.js',
45-
banner: getBanner('es'),
46-
format: 'es',
47-
},
48-
49-
{
50-
entryFileNames: '[name].cjs.js',
51-
banner: getBanner('cjs'),
52-
format: 'cjs',
53-
},
54-
],
55-
external: ['react', 'react-dom'],
56-
},
57-
outDir: resolve(__dirname, './dist'),
58-
lib: { entry: entryPath },
59-
// minify: true,
60-
cssCodeSplit: true,
61-
target: 'modules',
62-
emptyOutDir: true,
13+
export default defineConfig(({ mode }): UserConfig => {
14+
const cjsOutput: Output = [
15+
{
16+
entryFileNames: '[name].cjs.js',
17+
banner: getBanner('cjs'),
18+
format: 'cjs',
6319
},
64-
plugins: [
65-
// https://github.com/vitejs/vite/tree/main/packages/plugin-react
66-
react({
67-
jsxRuntime: 'classic',
68-
}),
69-
],
70-
resolve: {
71-
alias: getAlias(),
20+
];
21+
const output: Output = [
22+
{
23+
entryFileNames: '[name].es.js',
24+
banner: getBanner('es'),
25+
format: 'es',
7226
},
73-
cacheDir: `./.cache`,
74-
};
27+
...(mode !== 'analyze' ? cjsOutput : []),
28+
];
29+
const config = getCommonViteConfig({
30+
external: [
31+
'react',
32+
'react-dom',
33+
// 'prop-types',
34+
'rxjs',
35+
'@tool-pack/basic',
36+
'@tool-pack/dom',
37+
],
38+
output,
39+
});
40+
config.build.emptyOutDir = true;
41+
return config;
7542
});

‎packages/react-ui/vite.utils.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { replaceCodePlugin } from 'vite-plugin-replace';
2+
import { visualizer } from 'rollup-plugin-visualizer';
3+
import type { RequiredPart } from '@tool-pack/types';
4+
import type { UserConfig, Plugin } from 'vite';
5+
// import react from '@vitejs/plugin-react';
6+
import { getAlias } from '../../utils';
7+
import pkg from './package.json';
8+
import { resolve } from 'path';
9+
10+
export function getBanner(format: string) {
11+
const date = new Date();
12+
return (
13+
'/*!\n' +
14+
` * ToolPackReactUI(${pkg.name}) v${pkg.version}\n` +
15+
` * Author: ${pkg.author}\n` +
16+
` * Documentation: ${pkg.homepage}\n` +
17+
` * License: ${pkg.license}\n` +
18+
` * File: index.${format}.js\n` +
19+
` * Date: ${date.getFullYear()}-${
20+
date.getMonth() + 1
21+
}-${date.getDate()}\n` +
22+
` */\n`
23+
);
24+
}
25+
26+
const entryPath = resolve(__dirname, './src/index.ts');
27+
/**
28+
* Vite configuration
29+
* https://vitejs.dev/config/
30+
*/
31+
export function getCommonViteConfig(
32+
rollupOptions: Exclude<UserConfig['build'], undefined>['rollupOptions'],
33+
): RequiredPart<UserConfig, 'build'> {
34+
return {
35+
plugins: [
36+
// https://github.com/vitejs/vite/tree/main/packages/plugin-react
37+
// react({
38+
// jsxRuntime: 'classic',
39+
// }),
40+
replaceCodePlugin({
41+
replacements: [
42+
{ to: JSON.stringify('production'), from: 'process.env.NODE_ENV' },
43+
],
44+
}),
45+
{
46+
...(visualizer({ filename: 'temp/analyze.html' }) as Plugin),
47+
apply(_, { mode }) {
48+
return mode === 'analyze';
49+
},
50+
},
51+
],
52+
build: {
53+
outDir: resolve(__dirname, './dist'),
54+
lib: { entry: entryPath },
55+
target: 'modules',
56+
// minify: true,
57+
// cssCodeSplit: true,
58+
// emptyOutDir: true,
59+
rollupOptions,
60+
},
61+
// optimizeDeps: {
62+
// exclude: ['react', 'react-dom', 'react-is', 'rxjs', 'react-jsx-runtime'],
63+
// },
64+
esbuild: {
65+
tsconfigRaw: { compilerOptions: { jsx: 'react' } },
66+
},
67+
resolve: {
68+
alias: getAlias(),
69+
},
70+
cacheDir: `./.cache`,
71+
};
72+
}

0 commit comments

Comments
 (0)