Filter/Tag
13 entries
Speed up dev and build, assemble a production-grade capstone vite.config.ts from the whole series, and migrate off Webpack or CRA step by step — with the concept-by-concept translation table. With a capstone config & migration explorer.
Build publishable libraries with Vite (lib mode, ESM + CJS, .d.ts types, externalized peer deps, the exports map) and understand SSR plus the Environment API — the multi-runtime build model. With a library & environments explorer.
What vite build produces: the dist/ structure, automatic code splitting, manualChunks and advancedChunks for vendor splitting, asset hashing, source maps, target and minification. With a build output explorer.
The Rollup-compatible plugin API: the hooks that matter (resolveId, load, transform), enforce (pre/post) and apply (serve/build) ordering, and writing your own virtual-module plugin. With a plugin hook timeline.
Environment variables in Vite: import.meta.env, the .env file cascade and priority, the critical VITE_ prefix that gates what reaches the client, built-in vars, define vs env, and custom modes. With an env & mode resolver.
Import assets like code: the default URL form, the ?url / ?raw / ?worker queries, inlining small assets, public/ vs imported assets, and import.meta.glob for bulk imports. With an asset import explorer.
CSS in Vite with zero config: plain side-effect imports, scoped CSS Modules, built-in Sass/Less/Stylus, the ?inline query for Shadow DOM, automatic PostCSS, Lightning CSS, and code-split CSS in the build. With a CSS pipeline explorer.
How Hot Module Replacement swaps a single module without losing state: the import.meta.hot API, HMR boundaries and propagation, why some edits trigger a full reload, and framework Fast Refresh. With an HMR boundary lab.
Why Vite pre-bundles node_modules into .vite/deps: collapsing hundreds of module requests into one, converting CommonJS to ESM, and caching it all. Plus optimizeDeps include/exclude and when to clear the cache. With a pre-bundle visualizer.
How the dev server actually works: serving source over native ESM, rewriting bare and relative imports into fetchable URLs, transforming each file on request, and why navigation only fetches the new modules. With an on-demand request demo.
The Vite config top to bottom: defineConfig, plugins, root and base, resolve.alias, the dev server (port, open, proxy), define, css, and build options — plus config as a function of command and mode. With a live config builder.
Why Vite is fast: native ESM in dev means no bundling on startup, while production still bundles with Rolldown. Scaffold your first project, understand dev vs build, and see the two-strategy design. With a dev-startup race demo.
Why plain files stop scaling, and how to set up a modern extension project with Vite, CRXJS, TypeScript and React — HMR, bundling, npm packages, and a typed manifest. With an interactive build-pipeline visualizer.