Mengoptimalkan Tree Shaking dengan Claude Code

ツリーシェイキングで不要コードを自動除去

ツリーシェイキング 、使われてい tidakコード bundle dari 自動的 除去 optimasi技術.Claude Code 使えば、ツリーシェイキング 効果的 動作 コードstrukturへ peningkatan efisien 実施 bisa dilakukan.

ツリーシェイキングが効く書き方

> ツリーシェイキング 最大限効くよう 、utilitasmodul refactoringして。

// ❌ ツリーシェイキング 効か tidak書き方
// utils/index.ts
export default {
  formatDate(date: Date) { /* ... */ },
  formatCurrency(amount: number) { /* ... */ },
  formatPhoneNumber(phone: string) { /* ... */ },
  truncateText(text: string, max: number) { /* ... */ },
};

// ✅ ツリーシェイキング 効く書き方
// utils/formatDate.ts
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('en-US').format(date);
}

// utils/formatCurrency.ts
export function formatCurrency(amount: number): string {
  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'JPY' }).format(amount);
}

// utils/index.ts（再エクスポート）
export { formatDate } from './formatDate';
export { formatCurrency } from './formatCurrency';
export { formatPhoneNumber } from './formatPhoneNumber';
export { truncateText } from './truncateText';

pengaturan sideEffects

// package.json
{
  "name": "my-library",
  "sideEffects": false
}

// CSSインポート ada場合
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.ts",
    "./src/global-setup.ts"
  ]
}

optimasi バレルfile

// ❌ 巨大なバレルfile（全modul 読み込む）
// components/index.ts
export { Button } from './Button';
export { Card } from './Card';
export { Modal } from './Modal';
export { Table } from './Table';
export { Tabs } from './Tabs';
// ... 100個 komponen

// ❌ こ インポート 全komponen 読み込むdimungkinkan性 ada
import { Button } from './components';

// ✅ 直接インポート（確実 ツリーシェイキングされる）
import { Button } from './components/Button';

ツリーシェイキングdukungankonfirmasi library

// scripts/check-tree-shaking.ts
import { build } from 'esbuild';
import { readFileSync } from 'fs';

async function checkTreeShaking(pkg: string, importName: string) {
  const entry = `import { ${importName} } from '${pkg}'; console.log(${importName});`;
  
  const result = await build({
    stdin: { contents: entry, resolveDir: process.cwd() },
    bundle: true,
    write: false,
    minify: true,
    treeShaking: true,
    format: 'esm',
    metafile: true,
  });

  const size = result.outputFiles[0].contents.length;
  console.log(`${pkg} → ${importName}: ${(size / 1024).toFixed(1)}kB`);
  
  return size;
}

// Usage example：lodash-es ツリーシェイキング konfirmasi
await checkTreeShaking('lodash-es', 'debounce');
await checkTreeShaking('lodash-es', 'merge');

移行 CommonJSからESModulesへ

// ❌ CommonJS（ツリーシェイキング不可）
const { pick, omit } = require('lodash');
module.exports = { myFunction };

// ✅ ESModules（ツリーシェイキングdimungkinkan）
import { pick, omit } from 'lodash-es';
export function myFunction() { /* ... */ }

// tsconfig.json
{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ES2020"
  }
}

組み合わせ 動的インポート

// kondisi付き 重いlibrary 読み込む
async function processMarkdown(content: string) {
  // diperlukanな dan きだけインポート
  const { unified } = await import('unified');
  const remarkParse = (await import('remark-parse')).default;
  const remarkHtml = (await import('remark-html')).default;

  const result = await unified()
    .use(remarkParse)
    .use(remarkHtml)
    .process(content);

  return result.toString();
}

pengaturanoptimasi Vite

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    target: 'es2020',
    minify: 'terser',
    terserOptions: {
      compress: {
        dead_code: true,
        drop_console: true, // console.log 除去
        pure_funcs: ['console.debug'], // 特定fungsi 除去
      },
    },
    rollupOptions: {
      treeshake: {
        moduleSideEffects: false,
        propertyReadSideEffects: false,
      },
    },
  },
});

効果を測定 ツリーシェイキング

# バンドルサイズの比較
npx vite build -- --mode analyze

# 特定のインポートのサイズ確認
npx import-cost

Summary

ツリーシェイキング bundle分析 dan 組み合わせるこ dan 最大 効果 発揮.Claude Code 使えば、CommonJS dari ESModulesへ 移行やバレルfile optimasi dll.、地道なrefactoring作業 efisiensi bisa dilakukan.コード分割 dan 併用 、aplikasi全体 ロード時間 短縮し.ツリーシェイキング mekanisme mengenai webpack公式dokumen juga bisa dijadikan referensi.