Claude Code के साथ Optimizing Tree Shaking

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

ツリーシェイキングは、使われていないcodeをbundle से自動的に除去するoptimization技術 है।Claude Code का उपयोग करके、ツリーシェイキングが効果的に動作するcode構造への改善をefficiently実施でき है।

ツリーシェイキングが効くलिखने का तरीका

> ツリーシェイキングが最大限効く तरह、utilitymoduleをrefactoringして。

// ❌ ツリーシェイキングが効かないलिखने का तरीका
// 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';

sideEffectsのsettings

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

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

バレルfileのoptimization

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

// ❌ इसインポートは全componentを読み込むpossible性がある
import { Button } from './components';

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

libraryのツリーシェイキングsupportconfirm

// 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のツリーシェイキング confirm
await checkTreeShaking('lodash-es', 'debounce');
await checkTreeShaking('lodash-es', 'merge');

CommonJS सेESModulesへの移行

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

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

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

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

// 条件付きで重いlibraryを読み込む
async function processMarkdown(content: string) {
  // ज़रूरीなときだけインポート
  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();
}

Viteでのsettingsoptimization

// 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'], // 特定functionを除去
      },
    },
    rollupOptions: {
      treeshake: {
        moduleSideEffects: false,
        propertyReadSideEffects: false,
      },
    },
  },
});

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

# bundlesizeの比較
npx vite build -- --mode analyze

# 特定のインポートのsizeconfirm
npx import-cost

Summary

ツリーシェイキングはbundle分析 के साथ combineる बातで最大の効果を発揮し है।Claude Code का उपयोग करके、CommonJS सेESModulesへの移行やバレルfileのoptimization आदि、地道なrefactoring作業をefficiency improvementでき है।code分割と併用して、アプリ全体のロード時बीचを短縮 करें।ツリーシェイキングの仕組みके बारे मेंはwebpackofficial documentationभी reference के लिएなり है।