技能档案

Bundle Optimization

Name: Bundle Optimization
Author: ihj04982

Bundle optimization patterns — barrel file avoidance, conditional/dynamic imports, deferred third-party scripts, SVG precision. Use when reducing bundle size, improving LCP/TTI, or code-splitting.

ihj049820 星标2026年3月25日

职业
分类: 框架内部

技能内容

Bundle Optimization

Patterns to reduce initial bundle size, improve loading performance, and enable effective code-splitting.

1. Avoid Barrel File Imports

Import directly from source files instead of barrel (index) files to avoid loading thousands of unused modules.

Bad (imports entire library):

import { Check, X, Menu } from 'lucide-react';
// Loads 1,583 modules, takes ~2.8s extra in dev

import { Button, TextField } from '@mui/material';
// Loads 2,225 modules

Good (direct imports):

import Check from 'lucide-react/dist/esm/icons/check';
import X from 'lucide-react/dist/esm/icons/x';
import Menu from 'lucide-react/dist/esm/icons/menu';

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

相关技能

Bundle Optimization | Skills Pool

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@mui/material'],
  },
};

import { MonacoEditor } from './monaco-editor';

import dynamic from 'next/dynamic';

const MonacoEditor = dynamic(
  () => import('./monaco-editor').then((m) => m.MonacoEditor),
  { ssr: false },
);

function AnimationPlayer({ enabled, setEnabled }: Props) {
  const [frames, setFrames] = useState<Frame[] | null>(null);

  useEffect(() => {
    if (enabled && !frames && typeof window !== 'undefined') {
      import('./animation-frames.js')
        .then((mod) => setFrames(mod.frames))
        .catch(() => setEnabled(false));
    }
  }, [enabled, frames, setEnabled]);

  if (!frames) return <Skeleton />;
  return <Canvas frames={frames} />;
}

import { Analytics } from '@vercel/analytics/react';

import dynamic from 'next/dynamic';

const Analytics = dynamic(
  () => import('@vercel/analytics/react').then((m) => m.Analytics),
  { ssr: false },
);

Bundle Optimization

Bundle Optimization

1. Avoid Barrel File Imports

Bundle Optimization

Bundle Optimization

1. Avoid Barrel File Imports

2. Dynamic Imports for Heavy Components

3. Conditional Module Loading

4. Defer Non-Critical Third-Party Libraries

5. Optimize SVG Precision

Checklist

Pytorch Patterns

Regex Vs Llm Structured Text

Effect

Flags

WPF to WinUI 3 Migration Skill

At Dispatch V2