• Disadvantages: Cesium dependencies must be installed and several Vite plug-ins must be installed, slightly cumbersome to start a project, such as deploying a CDN

  • Advantages: the packaging speed takes off, and the network transmission efficiency of the constructed code is the best (referring to the loading speed of front-end script resources, etc.)

Install dependencies

yarn add cesium # This is for the vite esbuild to find modules during development
yarn add @types/cesium -D Import {Viewer} from 'cesium' import {Viewer} from 'cesium'
Copy the code

Install the Vite plug-in to configure the CDN

yarn add vite-plugin-html-config vite-plugin-compression vite-plugin-externals -D
Copy the code

The plug-invite-plugin-html-config

This plugin can modify index. HTML at dev script time and build script time, inject some HTML tags such as , 

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'}]})})Copy the code

The index.html package looks like this:

<! DOCTYPEhtml>
<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>
Copy the code

Although the typography is a bit weird, you can see that CESIUM_BASE_URL has been introduced correctly and the main widgets. CSS style has been introduced correctly.

Then configure the CESium CDN API, using IIS or Nginx configuration is appropriate, or buy CDN resources for acceleration.

The plug-invite-plugin-compression

This is the gzip compression of the packaged result, with the optimum compression ratio by default. Support for Brotil compression, see official REPO for details.

The plug-invite-plugin-externals

This plugin tells Vite, at build time, to tell Rollup not to package the cesium package, but to define a global object, cesium, in index.html, to the window.

Configure build compression to false in the Vite configuration file, and you can easily find code like this:

const Viewer = window["Cesium"].Viewer;
Copy the code

Obviously.

Without this plug-in, the CDN is meaningless.

Detail a problem with Cesium CDN deployment

CESIUM_BASE_URL

This is best defined globally (window), because I haven’t tried it anywhere else.

/path/to/Build/Cesium. The Build directory can be found in the download package:

That is, if you access CESIUM_BASE_URL/Assets, you are accessing Build/Cesium/Assets on disk.

The resources under this path are default images (for buttons), textures (skyboxes), Webworkers, styles.

Cesium. Js is available in the CESIUM_BASE_URL/Cesium.

I deploy this directory to the CEAPI application of the IIS default site, so the CESIUM_BASE_URL is http://localhost/ceapi, and configure a default file to be Cesium. Js with cross-domain permission.

Recommend improvements

The viet-plugin-html-config plugin can be changed to the viet-plugin-html plugin, which is more powerful. Of course, you can simply use the @rollup/plugin-html plugin to import the CDN address.

For the introduction of common library CDN, the viet-plugin-CDN-import plug-in can also be used.