perf: 配置 manualChunks 拆分 vendor chunk,优化打包体积

- 使用 Vite 插件 manualChunksForHtmlOnly 仅对 HTML 多入口构建生效
- 跳过 background/content-script 的 IIFE 构建(不支持 manualChunks)
- 拆分 vendor-react (193KB)、vendor-mui (326KB)、vendor-i18n (55KB)
- 按需加载 vendor-qr (78KB)、vendor-dnd (45KB)、vendor-markdown (41KB)
- PageErrorBoundary chunk 从 454KB 降至 36KB
This commit is contained in:
雨霖铃
2026-05-21 01:25:19 +08:00
parent 8e2ac5200d
commit 72f899477c
+57 -9
View File
@@ -1,4 +1,59 @@
import { defineConfig } from 'wxt'; import { defineConfig } from 'wxt';
import type { Plugin } from 'vite';
/**
* 仅在 HTML 多入口构建(popup / options / sidepanel)中启用 manualChunks 拆分 vendor。
* WXT 对 background / content-script 使用 lib 模式(IIFE),该模式不支持 manualChunks。
*/
function manualChunksForHtmlOnly(): Plugin {
return {
name: 'manual-chunks-html-only',
outputOptions(rawOptions) {
// lib 模式(IIFE)不支持 manualChunks,仅对 ES/CJS 格式启用
if (rawOptions.format === 'iife' || rawOptions.format === 'umd') {
return;
}
rawOptions.manualChunks = (id: string) => {
if (!id.includes('node_modules')) return;
// React 核心
if (id.includes('/react-dom/') || (id.includes('/react/') && !id.includes('/react-dom/'))) {
return 'vendor-react';
}
// MUI + Emotion
if (
id.includes('@mui/') ||
id.includes('@emotion/') ||
id.includes('hoist-non-react-statics') ||
id.includes('csstype') ||
id.includes('@popperjs/')
) {
return 'vendor-mui';
}
// 国际化
if (
id.includes('i18next') ||
id.includes('react-i18next') ||
id.includes('intl-messageformat')
) {
return 'vendor-i18n';
}
// QR 相关
if (id.includes('qr-scanner') || id.includes('qrious')) {
return 'vendor-qr';
}
// 拖拽
if (id.includes('@dnd-kit')) {
return 'vendor-dnd';
}
// Markdown
if (id.includes('marked')) {
return 'vendor-markdown';
}
};
},
};
}
// See https://wxt.dev/api/config.html // See https://wxt.dev/api/config.html
export default defineConfig({ export default defineConfig({
@@ -31,19 +86,12 @@ export default defineConfig({
}, },
}, },
vite: () => ({ vite: () => ({
plugins: [manualChunksForHtmlOnly()],
build: { build: {
// 1. 切换压缩器为 terser
minify: 'terser', minify: 'terser',
// 2. 配置 terser 强制转义所有非 ASCII 字符
terserOptions: { terserOptions: {
format: { format: { ascii_only: true, comments: false },
ascii_only: true,
comments: false,
}, },
},
// 3. 调整 chunk 大小警告阈值
chunkSizeWarningLimit: 600, chunkSizeWarningLimit: 600,
}, },
}), }),