WFDASH-WEBAPP/.kilo/skills/vercel-react-best-practices/rules/bundle-analyzable-paths.md
Dave 426bcb188a feat(duplicate-orders): refine duplicate order detection logic and UI enhancements
- Improved the `DuplicateOrdersDialog` component with better tab navigation for order number and line aggregate views.
- Enhanced the data structure for duplicate records to include `totalQuantity` and `totalSellingPrice` for more accurate detection.
- Implemented auto-flipping logic to ensure users see relevant content without encountering empty views.
- Expanded test coverage for the `findDuplicateOrders` function to validate new matching logic.
- Updated documentation to clarify duplicate identification criteria.
2026-08-16 16:27:45 +02:00

2.3 KiB

title impact impactDescription tags
Prefer Statically Analyzable Paths HIGH avoids accidental broad bundles and file traces bundle, nextjs, vite, webpack, rollup, esbuild, path

Prefer Statically Analyzable Paths

Build tools work best when import and file-system paths are obvious at build time. If you hide the real path inside a variable or compose it too dynamically, the tool either has to include a broad set of possible files, warn that it cannot analyze the import, or widen file tracing to stay safe.

Prefer explicit maps or literal paths so the set of reachable files stays narrow and predictable. This is the same rule whether you are choosing modules with import() or reading files in server/build code.

When analysis becomes too broad, the cost is real:

  • Larger server bundles
  • Slower builds
  • Worse cold starts
  • More memory use

Import Paths

Incorrect (the bundler cannot tell what may be imported):

const PAGE_MODULES = {
  home: './pages/home',
  settings: './pages/settings',
} as const

const Page = await import(PAGE_MODULES[pageName])

Correct (use an explicit map of allowed modules):

const PAGE_MODULES = {
  home: () => import('./pages/home'),
  settings: () => import('./pages/settings'),
} as const

const Page = await PAGE_MODULES[pageName]()

File-System Paths

Incorrect (a 2-value enum still hides the final path from static analysis):

const baseDir = path.join(process.cwd(), 'content/' + contentKind)

Correct (make each final path literal at the callsite):

const baseDir =
  kind === ContentKind.Blog
    ? path.join(process.cwd(), 'content/blog')
    : path.join(process.cwd(), 'content/docs')

In Next.js server code, this matters for output file tracing too. path.join(process.cwd(), someVar) can widen the traced file set because Next.js statically analyze import, require, and fs usage.

Reference: Next.js output, Next.js dynamic imports, Vite features, esbuild API, Rollup dynamic import vars, Webpack dependency management