安裝依賴

yarn add cesium # 這個是給開發時 vite 的 esbuild 找模塊用的
yarn add @types/cesium -D # 這個是給智能提示用的，例如 import { Viewer } from 'cesium'

安裝 vite 插件配置 cdn

yarn add vite-plugin-html-config vite-plugin-compression vite-plugin-externals -D

插件 `vite-plugin-html-config`

vite-plugin-html-config 這個插件可以在開發時（dev script）和構建時（build script）修改 index.html，注入一些 <link>、<script> 等 html 標簽，支持加入 js 腳本，見下例，加入 cesium 的全域樣式和主腳本：

import { defineConfig } from 'vite'
import { viteExternalsPlugin } from 'vite-plugin-externals'
import viteCompression from 'vite-plugin-compression'
import htmlPlugin from 'vite-plugin-html-config'

export default defineConfig({
  build: {
    minify: false
  },
  plugins: [
    viteCompression(),
    viteExternalsPlugin({
      cesium: 'Cesium'
    }),
    htmlPlugin({
      links: [
        {
          rel: 'stylesheet',
          href: 'http://localhost/ceapi/Widgets/widgets.css'
        }
      ],
      scripts: [
        `window['CESIUM_BASE_URL'] = 'http://localhost/ceapi/'`,
        {
          src: 'http://localhost/ceapi'
        }
      ]
    })
  ]
})

這樣，打包后的 index.html 是這樣的：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://www.cnblogs.com/assets/favicon.17e50649.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="https://www.cnblogs.com/assets/index.168edc3e.js"></script>
    <link rel="stylesheet" href="https://www.cnblogs.com/assets/index.70cc8697.css">
    <link rel="stylesheet" href="http://localhost/ceapi/Widgets/widgets.css">
  </head>
  <body>
    <div id="app"></div>
    
  
  <script>window['CESIUM_BASE_URL'] = 'http://localhost/ceapi/'</script>
    <script src="http://localhost/ceapi"></script>
</body>
</html>

雖然排版有一些詭異，但是看到 CESIUM_BASE_URL 已經正常引入了，widgets.css 主樣式也正確引入了，

隨后即配置 cesium cdn api 了，使用 IIS 或 nginx 配置是很合適的，或者買 cdn 資源加速，

插件 `vite-plugin-compression`

這個是對打包后的結果進行 gzip 壓縮的，默認用最佳壓縮比進行壓縮，支持 brotil 壓縮，細節見官方 repo.

插件 `vite-plugin-externals`

這個插件是告訴 vite，在構建時，告訴 rollup 不要對 cesium 這個包進行打包，而是在 index.html 中定義一個全域物件 Cesium，定義到 window 上，

在 vite 組態檔中配置構建的壓縮為 false，很容易找到這樣一句代碼：

const Viewer = window["Cesium"].Viewer;

很顯然，

如果不使用這個插件，cdn 就沒有意義了，

細說 Cesium CDN 部署的一個問題

`CESIUM_BASE_URL`

這個最好定義在全域（即 window），因為別處我沒試過，

這個路徑可以是相對路徑，也可以是絕對 http/https URL，要指向四大金剛檔案夾所在的目錄，一般是 /path/to/Build/Cesium，Build 目錄你可以在官方下載包中找到：

也就是說，你訪問 CESIUM_BASE_URL/Assets 相當于訪問磁盤上的 Build/Cesium/Assets，

這個路徑下的資源是一些默認圖片（按鈕要用到的）、貼圖（天空盒）、WebWorker、樣式，

這個路徑下也有一個 Cesium.js，是可以正常使用的，通過 CESIUM_BASE_URL/Cesium.js 即可使用，

我部署此目錄到 IIS 默認網站的 ceapi 應用程式上，那么這個 CESIUM_BASE_URL 即 http://localhost/ceapi，再配置一個默認檔案是 Cesium.js 加允許跨域即可，

vite 開發 Cesium 程式最佳配置實踐

安裝依賴

安裝 vite 插件配置 cdn

插件 vite-plugin-html-config

插件 vite-plugin-compression

插件 vite-plugin-externals

細說 Cesium CDN 部署的一個問題

CESIUM_BASE_URL

推薦改進

插件 `vite-plugin-html-config`

插件 `vite-plugin-compression`

插件 `vite-plugin-externals`

`CESIUM_BASE_URL`