You're building a multi-page React site with dozens of pages. Each shares common components, routing, and utilities. Webpack builds: 15 seconds incremental, 2 minutes full. The config has ballooned to 200 lines. One library update triggers a rebuild of all chunks. This slows development and inflates traffic.
We integrate Import Maps – a native browser mechanism for managing ES modules without a bundler. Instead of bundling, the browser resolves dependencies from a map. Results: zero build time, separate caching, simple updates. In our experience, this saves up to 40% on traffic and cuts LCP by 20–30% compared to Webpack.
Problems We Solve
Slow Build Times
Even with Webpack 5, incremental builds are an illusion. Change one file, and the tool rebuilds dependent chunks. With Import Maps, no build is needed: write code, place the file on the server, refresh the page. The server just serves static files. Compilation time drops to zero – development becomes edit-and-refresh without waiting.
Version Conflicts
Classic sites with jQuery and multiple plugins often suffer version conflicts where different parts expect different library versions. Import Maps solves this with scopes: for /admin/ paths, you can specify one React version, for the main site another. No globals, no hacks. Version resolution happens at the browser level, not in the build.
How We Implement Import Maps
Our process starts with a thorough audit of your stack. We identify shared dependencies, analyze version requirements, and choose the best CDN (esm.sh, jsDelivr, or self-hosted). Then we design the import map with scopes and caching strategy, implement it in your templates, adapt modules to ES imports, and test performance with Core Web Vitals.
A Concrete Case
On a project with a 5-page React SPA and three admin interfaces, we replaced a Webpack 5 build with Import Maps using esm.sh. Initial bundle size dropped from 1.2 MB to 400 KB (only what's used per page). Incremental builds became instant – developers saved an average of 2 minutes per hot reload. LCP improved by 25% across all pages.
Process for Estimating and Delivering
- Audit: Review current stack, list shared dependencies, assess versions, choose CDN.
- Design: Build import map, define scopes, plan caching strategy, fallback for legacy browsers.
- Implement: Add import map to templates, refactor modules to ES imports, configure server MIME types.
- Test: Verify module loading, performance (Lighthouse), no regressions.
- Deploy: Push to production, monitor errors, set CDN caching headers.
We don't offer fixed prices because every project is different. After a free audit, we provide a tailored estimate.
Timeline Benchmarks
Typical projects range from 1 to 3 weeks, depending on site complexity and number of pages. A simple 5‑page site with a few shared dependencies can be done in a week. Larger projects with dozens of pages and custom scopes may take up to three weeks.
Common Mistakes to Avoid
-
Forgetting to preload the import map: The
<script type="importmap">must load before any module script. - Using bare specifiers without scoping: If different sections need different versions, always use scopes.
-
Ignoring MIME types: Your server must serve
.mjsfiles withapplication/javascriptortext/javascript. - Not testing on all browsers: Even though modern browsers support Import Maps, verify with Safari and Firefox.
Comparison: Webpack vs Import Maps for MPA
| Metric | Webpack (typical MPA) | Import Maps |
|---|---|---|
| Build time | >10 seconds per rebuild | 0 seconds (no build) |
| Vendor caching | Config‑dependent, often duplicated | Native separate caching |
| Initial traffic | Full bundle (often >1 MB) | Only used modules |
| Typical LCP | Varies with bundle size | 20–30% reduction |
Choosing a CDN
| Provider | Version pinning | Speed | Full control |
|---|---|---|---|
| esm.sh | Yes | High | No (but stable) |
| jsDelivr | Yes | High | No |
| Self-hosted | Yes | Server-dependent | Yes |
For most projects, we recommend esm.sh – it supports version pinning and auto-optimizes modules.
Example of using scopes
{ "imports": { "react": "https://esm.sh/[email protected]" }, "scopes": { "/admin/": { "react": "https://esm.sh/[email protected]" } } } Setting up Import Maps for a Multi-Page Site
- Identify shared dependencies (React, utilities).
- Choose a host (CDN or self-hosted).
- Create the import map in your HTML template – load it before any module script.
- For local modules, use a prefix like
@/or map them directly. - Verify network loading in browser DevTools.
Example base map:
<script type="importmap"> { "imports": { "react": "https://esm.sh/stable/[email protected]/es2022/react.mjs", "react-dom/client": "https://esm.sh/stable/[email protected]/es2022/client.mjs", "htm/react": "https://esm.sh/[email protected]/react", "@/": "/static/js/" } } </script> What Our Work Includes
- Full stack audit and dependency mapping.
- Import map design with scopes and caching strategy.
- Implementation: integrating the map into templates, refactoring modules to ES imports.
- Testing of loading, performance (Core Web Vitals), and no regressions.
- Documentation and team training on native module workflow.
Why Work With Us
Our team has over 10 years of production experience with web stacks (Bitrix, 1C, React) and has completed 40+ projects involving native module migration. We guarantee correct caching and support for all modern browsers.
Ready to eliminate build times? Contact us for a free audit of your current stack. We'll evaluate where Import Maps can make an impact and propose a custom solution.