Architech.Fun 简单/高效

importmap 的配置案例

vite.config.js 通过 build.rollupOptions.external 指定不打包的库名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  base: '/bsc',
  plugins: [vue(), vuetify()],
  build: {
    outDir: './dist/bsc',
    rollupOptions: {
      external: [/three.*/],
    },
  },
})

index.html 通过 importmap 指定 CDN

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:image/ico;base64,aWNv" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.min.js",
          "three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/"
        }
      }
    </script>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="./src/main"></script>
  </body>
</html>