Code Splitting

21.2.1. Route-Based Splitting

Code must be split at the route level to minimize the JavaScript size required for initial loading.

const routes = [
  { path: '/dashboard', component: () => import('@/pages/DashboardPage.vue') },
  { path: '/settings', component: () => import('@/pages/SettingsPage.vue') },
]

• All route components must be dynamically loaded using the () => import() pattern.
• Registering route components with static import is not permitted.
• The build tool must be configured to automatically generate per-route chunks.
• The JavaScript size at the initial entry point must be minimized to ensure fast first-page loading.

---

21.2.2. Dynamic Import

Features needed only under specific conditions must be conditionally loaded using dynamic import().

// Conditional loading of admin-only features
async function loadAdminModule() {
  if (userStore.isAdmin) {
    const { AdminPanel } = await import('@/modules/admin')
    return AdminPanel
  }
}

• Features accessed by only a subset of users, such as admin-only or permission-specific features, must use dynamic imports.
• In Vue, defineAsyncComponent may be used to define asynchronous components.

import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200,
})

• Specifying a loadingComponent for loading state display in async components is recommended.
• Setting the delay option to prevent flickering during brief loading periods is recommended.

---

21.2.3. Preload and Prefetch

Resources that the user is likely to visit soon must be pre-loaded to improve perceived performance.

Strategy	Use Case	Priority
preload	Resources required on the current page	High
prefetch	Resources potentially needed for next navigation	Low

<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<link rel="prefetch" href="/js/settings-page.chunk.js">

• preload must be applied to resources essential for the current route (fonts, key images).
• Applying prefetch to chunk files of next navigation target routes is recommended.
• Vue Router's webpackPrefetch or the build tool's automatic prefetch functionality may be utilized in route definitions.
• Applying user behavior-based preloading (e.g., preloading the corresponding route chunk when hovering over a link) is recommended.

---

21.2.4. Tree Shaking

Tree shaking must be ensured so that unused code is not included in build output.

• Named imports must always be used when importing functionality from libraries.

// Correct example
import { debounce } from 'lodash-es'

// Incorrect example: the entire library is included in the bundle
import _ from 'lodash'

• "sideEffects": false must be set in package.json to allow the bundler to remove unused modules.
• Files with side effects (CSS imports, global polyfills, etc.) must be listed in the sideEffects array.

{
  "sideEffects": ["*.css", "*.scss", "./src/polyfills.ts"]
}

• The tree-shakeable import pattern for each library must be identified and applied.