![\"\u5c01\u9762\u4fe1\u606f\u56fe\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/09\/20260930130918-6abd09fedfa3e.webp\")
<\/p>\n<\/p>\n
\u5728\u73b0\u4ee3\u5927\u524d\u7aef\u5de5\u7a0b\u5316\u4f53\u7cfb\u4e2d，\u9996\u5c4f\u52a0\u8f7d\u6027\u80fd（LCP \/ Largest Contentful Paint）\u4e0e\u7528\u6237\u8bbf\u95ee\u7559\u5b58\u7387\u76f4\u63a5\u6302\u94a9\u3002<\/p>\n
\u7136\u800c，\u5728\u6784\u5efa\u5de5\u5177（Vite \/ Rollup \/ Webpack \/ Rspack）\u7684\u4ee3\u7801\u5206\u5272（Code Splitting）\u914d\u7f6e\u4e0a，\u8bb8\u591a\u56e2\u961f\u7ecf\u5e38\u5728\u4e24\u4e2a\u6781\u7aef\u8bef\u533a\u4e4b\u95f4\u53cd\u590d\u6a2a\u8df3：<\/p>\n
\u6784\u5efa\u4e00\u5957**\u201c\u5206\u5c42\u6e10\u8fdb\u5f0f Chunk \u62d3\u6251\u5206\u5272\u67b6\u6784（Layered Topology Chunking Strategy）\u201d \u7ed3\u5408 \u201cCI\/CD \u81ea\u52a8\u5316\u5927\u5c0f\u9884\u7b97\u95e8\u7981（Bundle Size Limit Guard）\u201d**，\u662f\u73b0\u4ee3\u524d\u7aef\u5de5\u7a0b\u5b9e\u73b0\u9996\u5c4f\u6781\u901f\u79d2\u5f00\u7684\u6838\u5fc3\u538b\u8231\u77f3\u3002<\/p>\n
\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 1. \u57fa\u7840\u4e0d\u53d8\u5c42 (vendor-framework: ~140KB \/ Gzip 42KB \/ \u7f13\u5b58\u547d\u4e2d\u7387 99%) \u2502
\n\u2502 \u2514\u2500\u2500 \u5305\u542b: react, react-dom, @tanstack\/react-query (\u51e0\u4e4e\u534a\u5e74\u4e0d\u53d1\u7248) \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 2. \u8bbe\u8ba1\u7cfb\u7edf\u5c42 (vendor-design-system: ~180KB \/ Gzip 55KB \/ \u7f13\u5b58\u547d\u4e2d\u7387 90%) \u2502
\n\u2502 \u2514\u2500\u2500 \u5305\u542b: @company\/design-tokens, lucide-react, framer-motion \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 3. \u5f02\u6b65\u91cd\u578b\u5f15\u64ce\u5c42 (vendor-heavy-engines: \u6309\u9700\u61d2\u52a0\u8f7d Lazy-loaded) \u2502
\n\u2502 \u2514\u2500\u2500 \u5305\u542b: echarts, three.js, monaco-editor (\u4ec5\u5728\u8fdb\u5165\u5bf9\u5e94\u7279\u5b9a\u9875\u9762\u65f6\u4e0b\u8f7d) \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 4. \u4e1a\u52a1\u7279\u6027\u5c42 (feature-pages: < 45KB per page \/ \u9891\u7e41\u8fed\u4ee3\u53d1\u5e03) \u2502
\n\u2502 \u2514\u2500\u2500 \u5305\u542b: Dashboard.tsx, Checkout.tsx (\u4f53\u79ef\u6781\u8f7b，\u4fee\u6539\u4ec5\u5bfc\u81f4\u672c\u6587\u4ef6\u7f13\u5b58\u5931\u6548) \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n
\u62d3\u6251\u6838\u5fc3\u4f18\u52bf：<\/p>\n
\/\/ vite.config.ts
\nimport { defineConfig } from 'vite';
\nimport react from '@vitejs\/plugin-react';<\/p>\n
export default defineConfig({
\n plugins: [react()],
\n build: {
\n target: 'es2022',
\n cssCodeSplit: true,
\n sourcemap: false,
\n chunkSizeWarningLimit: 500, \/\/ \u8d85\u8fc7 500KB \u62a5\u8b66<\/p>\n
rollupOptions: {
\n output: {
\n \/\/ \u6838\u5fc3：\u56db\u5c42\u62d3\u6251\u5206\u5305\u7b56\u7565\u7b97\u6cd5
\n manualChunks(id) {
\n if (id.includes('node_modules')) {
\n \/\/ 1. \u57fa\u7840\u4e0d\u53d8\u6846\u67b6\u5c42
\n if (id.includes('react') || id.includes('scheduler') || id.includes('react-dom')) {
\n return 'vendor-framework';
\n }<\/p>\n
\/\/ 2. \u8def\u7531\u4e0e\u72b6\u6001\u7ba1\u7406\u5c42
\n if (id.includes('react-router') || id.includes('zustand') || id.includes('@tanstack')) {
\n return 'vendor-core-state';
\n }<\/p>\n
\/\/ 3. \u8bbe\u8ba1\u7cfb\u7edf\u4e0e\u52a8\u6548\u5e93
\n if (id.includes('framer-motion') || id.includes('lucide-react') || id.includes('@radix-ui')) {
\n return 'vendor-ui-motion';
\n }<\/p>\n
\/\/ 4. \u91cd\u578b\u4e09\u65b9\u4f9d\u8d56\u5355\u72ec\u6210\u5305
\n if (id.includes('echarts') || id.includes('zrender')) {
\n return 'vendor-heavy-echarts';
\n }
\n if (id.includes('three')) {
\n return 'vendor-heavy-three';
\n }<\/p>\n
\/\/ \u5176\u4f59\u957f\u5c3e\u4e09\u65b9\u5e93\u6253\u5305\u4e3a\u57fa\u7840\u516c\u5171\u4f9d\u8d56
\n return 'vendor-common-libs';
\n }
\n },<\/p>\n
\/\/ \u7edf\u4e00\u4ea7\u7269\u547d\u540d\u6a21\u5f0f
\n chunkFileNames: 'assets\/js\/[name]-[hash].js',
\n entryFileNames: 'assets\/js\/[name]-[hash].js',
\n assetFileNames: 'assets\/[ext]\/[name]-[hash].[ext]',
\n },
\n },
\n },
\n});<\/p>\n
\u4e3a\u4e86\u9632\u6b62\u67d0\u4e9b\u5f00\u53d1\u8005\u5728\u4e0d\u7ecf\u610f\u95f4 import \u4e86\u4e00\u4e2a\u9ad8\u8fbe 800KB \u7684\u91cd\u578b\u5305（\u5982\u672a\u505a\u6309\u9700\u52a0\u8f7d\u7684\u5b8c\u6574 lodash \u6216 moment），\u6211\u4eec\u5728\u9879\u76ee\u4e2d\u914d\u7f6e Size-Limit \u81ea\u52a8\u5316\u7ea2\u7ebf：<\/p>\n
\/\/ .size-limit.json
\n[
\n {
\n "path": "dist\/assets\/js\/vendor-framework-*.js",
\n "limit": "45 KB",
\n "brotli": true
\n },
\n {
\n "path": "dist\/assets\/js\/vendor-ui-motion-*.js",
\n "limit": "60 KB",
\n "brotli": true
\n },
\n {
\n "path": "dist\/assets\/js\/index-*.js",
\n "limit": "35 KB",
\n "brotli": true
\n }
\n]<\/p>\n
\/\/ scripts\/bundle-budget-guard.ts
\nimport * as fs from 'fs';
\nimport * as path from 'path';
\nimport * as zlib from 'zlib';
\nimport { globSync } from 'glob';<\/p>\n
interface BudgetRule {
\n pattern: string;
\n maxGzipKb: number;
\n}<\/p>\n
const BUDGETS: BudgetRule[] = [
\n { pattern: 'dist\/assets\/js\/vendor-framework-*.js', maxGzipKb: 50 },
\n { pattern: 'dist\/assets\/js\/vendor-ui-motion-*.js', maxGzipKb: 65 },
\n { pattern: 'dist\/assets\/js\/index-*.js', maxGzipKb: 40 },
\n];<\/p>\n
export function executeBudgetCheck() {
\n console.log('📦 [Bundle Budget] \u6b63\u5728\u5ba1\u8ba1\u524d\u7aef\u6784\u5efa\u4ea7\u7269\u7269\u7406\u5927\u5c0f\u4e0e Gzip \u9884\u7b97…\\\\n');<\/p>\n
let hasBreach = false;<\/p>\n
for (const rule of BUDGETS) {
\n const matchedFiles = globSync(rule.pattern);
\n if (matchedFiles.length === 0) {
\n console.warn(`\u26a0\ufe0f \u672a\u5339\u914d\u5230\u4ea7\u7269\u6587\u4ef6: ${rule.pattern}`);
\n continue;
\n }<\/p>\n
for (const file of matchedFiles) {
\n const rawContent = fs.readFileSync(file);
\n const gzippedContent = zlib.gzipSync(rawContent);
\n const gzipSizeKb = parseFloat((gzippedContent.length \/ 1024).toFixed(2));<\/p>\n
const isOverBudget = gzipSizeKb > rule.maxGzipKb;
\n const statusIcon = isOverBudget ? '\u274c \u9884\u7b97\u8d85\u6807' : '\u2705 \u5408\u89c4\u8fbe\u6807';<\/p>\n
console.log(`${statusIcon} | \u6587\u4ef6: ${path.basename(file)} | Gzip: ${gzipSizeKb} KB (\u9884\u7b97\u4e0a\u9650: ${rule.maxGzipKb} KB)`);<\/p>\n
if (isOverBudget) {
\n hasBreach = true;
\n }
\n }
\n }<\/p>\n
if (hasBreach) {
\n console.error('\\\\n🚨 ============================================================');
\n console.error('\u274c [CI \u95e8\u7981\u963b\u65ad] \u68c0\u6d4b\u5230\u4ea7\u7269\u4f53\u79ef\u8d85\u8fc7\u9884\u8bbe\u6027\u80fd\u9884\u7b97\u7ea2\u7ebf！');
\n console.error('👉 \u8bf7\u6392\u67e5\u662f\u5426\u5f15\u5165\u4e86\u672a\u7ecf Tree-shaking \u7684\u5927\u578b\u4f9d\u8d56\u5305！');
\n console.error('============================================================\\\\n');
\n process.exit(1);
\n } else {
\n console.log('\\\\n🎉 [CI \u6821\u9a8c\u901a\u8fc7] \u5168\u7ad9\u4ea7\u7269\u4e25\u683c\u7b26\u5408\u6027\u80fd\u9884\u7b97，\u9996\u5c4f\u79d2\u5f00\u6307\u6807\u7edd\u5bf9\u8fbe\u6807！\\\\n');
\n }
\n}<\/p>\n
executeBudgetCheck();<\/p>\n
\u4ee3\u7801\u5206\u5272\u7684\u6700\u9ad8\u5883\u754c，\u662f\u5728\u6d4f\u89c8\u5668 HTTP \u4f20\u8f93\u6548\u7387\u3001\u4f9d\u8d56\u7f13\u5b58\u590d\u7528\u7387\u4e0e\u4e3b\u7ebf\u7a0b\u89e3\u6790\u8017\u65f6\u4e4b\u95f4\u8fbe\u6210\u5b8c\u7f8e\u7684\u52a8\u6001\u5e73\u8861\u3002\u901a\u8fc7\u843d\u5730\u56db\u5c42\u62d3\u6251 Chunk \u5206\u5272\u89c4\u8303，\u5e76\u5728 CI \u6d41\u6c34\u7ebf\u4e2d\u7b51\u8d77\u4e25\u683c\u7684 Size-Limit \u6027\u80fd\u9884\u7b97\u7ea2\u7ebf，\u6211\u4eec\u5f7b\u5e95\u6d88\u706d\u4e86\u5de8\u77f3\u5355\u5305\u4e0e\u7ec6\u788e\u8bf7\u6c42\u96ea\u5d29，\u4e3a\u5927\u578b\u73b0\u4ee3 Web \u5e94\u7528\u7b51\u8d77\u4e86\u7ecf\u4e45\u4e0d\u8870\u7684\u9996\u5c4f\u79d2\u5f00\u6027\u80fd\u57fa\u77f3\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u73b0\u4ee3\u524d\u7aef\u6784\u5efa Chunk \u5206\u5272\u62d3\u6251\u4f18\u5316\u4e0e\u4ea7\u7269\u5927\u5c0f\u9884\u7b97\u6cbb\u7406\u5728\u73b0\u4ee3\u5927\u524d\u7aef\u5de5\u7a0b\u5316\u4f53\u7cfb\u4e2d，\u9996\u5c4f\u52a0\u8f7d\u6027\u80fd（LCP \/ Largest Contentful Paint）\u4e0e\u7528\u6237\u8bbf\u95ee\u7559\u5b58\u7387\u76f4\u63a5\u6302\u94a9\u3002
\n\u7136\u800c，\u5728\u6784\u5efa\u5de5\u5177（Vite \/ Rollup \/ Webpack \/ Rspack）\u7684\u4ee3\u7801\u5206\u5272（Code Splitting）\u914d\u7f6e\u4e0a，\u8bb8\u591a\u56e2\u961f\u7ecf\u5e38\u5728\u4e24\u4e2a\u6781\u7aef\u8bef\u533a\u4e4b\u95f4\u53cd\u590d<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[66,573,594,50,87],"topic":[],"class_list":["post-111283","post","type-post","status-publish","format-standard","hentry","category-server","tag-ai","tag-css","tag-web","tag-50","tag-87"],"yoast_head":"\n