how to external dep on dev server ?

[yeli19950109]

how to external dep on dev server ?
i want use esm.sh at dev

[tt-a1i]

To use external CDN (like esm.sh) for dependencies in Vite dev server, you have a few options:

Option 1: Use vite-plugin-cdn-import

import { defineConfig } from 'vite';
import cdn from 'vite-plugin-cdn-import';

export default defineConfig({
  plugins: [
    cdn({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: 'https://esm.sh/react@18',
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: 'https://esm.sh/react-dom@18',
        },
      ],
    }),
  ],
});

Option 2: Manual aliasing with resolve.alias

export default defineConfig({
  resolve: {
    alias: {
      'react': 'https://esm.sh/react@18',
      'react-dom': 'https://esm.sh/react-dom@18',
    },
  },
});

Option 3: Import maps (native browser feature)

In your index.html:

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom": "https://esm.sh/react-dom@18"
  }
}
</script>

Then configure Vite to externalize:

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'],
    },
  },
  optimizeDeps: {
    exclude: ['react', 'react-dom'],
  },
});

Note: In dev mode, Vite pre-bundles dependencies for performance. Using CDN will make initial loads slower but can reduce bundle size in production.