Vue.js Build Tools FAQ & Answers

Use Vite's build command for optimized production bundles. Command: npm run build (runs vite build from package.json). Process: (1) Reads index.html as entry point, (2) Bundles all dependencies with tree-shaking, (3) Minifies JS/CSS, (4) Generates hashed filenames for cache busting, (5) Outputs to dist/ directory. Configuration: vite.config.ts: export default { build: { target: 'es2015', outDir: 'dist', assetsDir: 'assets', sourcemap: false, minify: 'esbuild', rollupOptions: { output: { manualChunks: { vendor: ['vue', 'vue-router', 'pinia'] } } } } };. Build output: dist/index.html, dist/assets/.js (hashed), dist/assets/.css (hashed). Serve locally: npm run preview (serves dist/ for testing). Optimizations: (1) Lazy loading routes, (2) Code splitting with dynamic imports, (3) Tree-shaking unused code (Vite automatic), (4) Asset compression (gzip/brotli via server). Build stats: --report flag shows bundle analysis. Production vs dev: NODE_ENV=production enables minification, removes debug warnings, optimizes Vue runtime. Deploy: upload dist/ to static hosting (Netlify, Vercel, Cloudflare Pages, S3+CloudFront).

Use rimraf for cross-platform file deletion. Setup: npm install -D rimraf. Package.json script: { "scripts": { "clean": "rimraf dist node_modules/.vite", "prebuild": "npm run clean", "build": "vite build" } }. rimraf dist removes build output, node_modules/.vite clears Vite cache. Why rimraf: works on Windows/Linux/macOS (rm -rf only Unix), handles locked files, no shell dependency. Alternative: { "clean": "shx rm -rf dist" } with shx package. Clean strategies: (1) Clean before build (prebuild hook), (2) Clean on demand (npm run clean), (3) Clean node_modules (npm run clean:all with rimraf node_modules dist). Common artifacts to clean: dist/ (build output), .vite/ (Vite cache), coverage/ (test coverage), .nuxt/ (Nuxt cache), .output/ (Nitro output). Git: add dist/, .vite/, coverage/ to .gitignore to avoid committing. Best practices: (1) Don't commit build artifacts, (2) Clean cache when switching branches, (3) CI/CD should always clean before build, (4) Use pre hooks for automatic cleanup. Performance: cleaning before build prevents stale file issues, ensures fresh build.

Define scripts in package.json for common tasks. Standard scripts: { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "vitest", "lint": "eslint . --ext .vue,.js,.ts", "format": "prettier --write src/" } }. Run: npm run dev (or npm run ). Built-in shortcuts: npm start → npm run start, npm test → npm run test. Lifecycle hooks: "prebuild": "npm run lint" runs before build, "postbuild": "npm run analyze" runs after. Chaining scripts: "build:all": "npm run lint && npm run test && npm run build" (sequential), "dev:all": "npm-run-all --parallel dev test:watch" (parallel with npm-run-all package). Pass arguments: npm run dev -- --port 3000 (double dash passes to script). Environment variables: "dev": "cross-env NODE_ENV=development vite" (cross-env for Windows compat). Complex scripts: "deploy": "npm run build && npm run test && firebase deploy". Best practices: (1) Use descriptive names (dev, build, test:unit, test:e2e), (2) Document scripts in README, (3) Keep scripts simple (<5 commands), (4) Use packages for complex logic (not bash in JSON), (5) Leverage pre/post hooks for automation. 2025 stat: teams with automated scripts report 45% reduction in manual setup time.

Scripts automate repetitive tasks and standardize team workflows. Key roles: (1) Development server: "dev": "vite" starts dev server consistently across team, (2) Build process: "build": "vite build" ensures production build uses same config, (3) Testing: "test": "vitest" runs all tests with one command, (4) Code quality: "lint": "eslint ." enforces coding standards, (5) Pre-commit checks: "prepare": "husky install" sets up Git hooks. Benefits: (1) Consistency: everyone uses same commands, reduces 'works on my machine' issues, (2) Automation: pre/post hooks run tasks automatically, (3) CI/CD integration: npm run test in pipeline, (4) Onboarding: new developers run npm install && npm run dev, (5) Documentation: scripts serve as executable documentation. Common patterns: "start" (production server), "dev" (development), "build" (production bundle), "test" (all tests), "test:unit" (unit only), "test:e2e" (E2E only), "lint" (check), "lint:fix" (auto-fix), "format" (Prettier). Advanced: "analyze": "vite-bundle-visualizer" shows bundle composition. Security: avoid running untrusted scripts, audit dependencies regularly. Best practice: keep scripts simple, document complex ones, use tools (husky, lint-staged, commitlint) for quality gates.

Install Vue DevTools browser extension (Chrome/Firefox/Edge). Features: (1) Component tree: inspect component hierarchy, select component to view props/data/computed/methods, live edit values in real-time. (2) Timeline: track component lifecycle events (created, mounted, updated), see event emissions, measure render performance, time-travel debugging (rewind app state). (3) Pinia inspector: view store state, track mutations/actions, modify state directly, see getters values. (4) Performance: identify slow components, measure render time per component, detect unnecessary re-renders, use Vite Inspect to see file sizes. (5) Custom events: track $emit events, see event payload, trace event flow through components. (6) Routing: inspect current route, view route params/query, see navigation history. Usage: open browser DevTools, select Vue tab, inspect components. Live editing: click component in tree, edit data/props in right panel, see immediate UI update. Performance tab: record timeline, analyze component render times, find bottlenecks (red bars = slow). Best practices: (1) Use in development only (disabled in production), (2) Name components for easier debugging, (3) Use Timeline for tracking state changes, (4) Profile performance before optimization. 2025 features: enhanced Composition API support, real-time error detection, improved performance profiling.

Combine lazy loading, tree-shaking, and code splitting for smaller bundles. Techniques: (1) Route-level lazy loading: const UserProfile = () => import('./views/UserProfile.vue'); in router, loads components only when route accessed, reduces initial bundle by 40-60%. (2) Tree-shaking: Vite/Rollup removes unused code automatically, use ES modules (import/export) not CommonJS (require), avoid side effects in modules. Vue 3 tree-shakeable: built-in components like excluded if unused, reduces bundle by 5-15%. (3) Code splitting: configure manual chunks in vite.config.ts: rollupOptions: { output: { manualChunks: { vue: ['vue', 'vue-router', 'pinia'], ui: ['element-plus'] } } }. (4) Component auto-import: use unplugin-vue-components to import components on-demand, excludes unused components from bundle. (5) Dynamic imports: const { heavyFunction } = await import('./heavy.js'); loads on demand, not at startup. (6) Analyze bundle: vite-plugin-visualizer shows bundle composition, identify large dependencies. Results: Vue 3 base ~10KB (vs Vue 2 ~20KB), tree-shaking can reduce total bundle by 30-50%. Best practices: (1) Lazy load routes, (2) Use lightweight libraries, (3) Split vendor bundles, (4) Compress with gzip/brotli (70% reduction), (5) Monitor bundle size in CI (fail if exceeds threshold).

Build hashing enables aggressive browser caching with instant cache invalidation. Mechanism: build tool (Vite, Webpack) generates filenames with content hash: app.a3f2b1c9.js, styles.d4e5f6a7.css. Hash changes when file content changes, unchanged files keep same hash. Benefits: (1) Long cache duration: set Cache-Control: max-age=31536000 (1 year) on assets, browser caches aggressively, no server requests for cached files. (2) Instant updates: when code changes, new hash generated (app.b4c3d2e1.js), HTML references new hash, browser fetches new file automatically, no manual cache clearing needed. (3) Parallel deployments: old and new versions coexist, users on old version continue working, new users get new version, no broken assets during deploy. Implementation: Vite automatically adds [hash] to filenames in production build, HTML updated to reference hashed files. Example: . Cache headers: static assets (JS/CSS/images) → max-age=31536000, immutable; HTML → max-age=0, must-revalidate (always fetch fresh HTML). CDN benefit: CDN caches hashed assets globally, serves from edge locations (faster), new deploys don't require CDN cache purge. Best practice: never cache HTML (contains asset references), always cache hashed assets (1 year+), use CDN for static assets.

Vue Single File Components (SFC) use .vue extension with three sections. Structure: