博客園 @四季留歌
-
缺點：必須安裝 cesium 依賴和幾個 vite 插件，起項目時略微麻煩，部署 cdn 較麻煩
-
優點：打包速度起飛，構建後的成果代碼網絡傳輸效率最佳
安裝依賴
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="/assets/favicon.17e50649.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index.168edc3e.js"></script>
<link rel="stylesheet" href="/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-plugin-html-config 這個插件可以改爲 vite-plugin-html 插件，這個插件更強大。當然，你也可以簡單的用 @rollup/plugin-html 插件完成 cdn 地址的引入。
對於 常見庫的 CDN 的引入，也可以用 vite-plugin-cdn-import 插件。