vue项目中CDN引用cesium

原创于 2021-11-23 11:20:54 发布 · 3.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #vue.js #gis #前端

cesium 同时被 3 个专栏收录

2 篇文章

订阅专栏

框架

2 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

博客讲述了在项目中引用cesium库时，由于npm安装导致的文件体积过大问题，作者通过将cesium改用CDN引入，成功减少了3M的打包体积。在index.html中添加cesium的CDN链接，并在webpack.config.js中配置externals，确保组件仍能正常工作。

引言：cesium包太大，本来使用npm install cesium 的方式引用，后发现打包后文件太大，影响了页面加载速度，遂改为cdn引入，打包压缩后小了3M多的体积。

1. index.html cdn引入

<link href="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.74/Build/Cesium/Cesium.js"></script>

2. build / webpack.config.js 加入externals 如下配置 (vue/cli2.x版本)

module.exports = {
    ...

    externals: {
        Cesium: 'Cesium'
    }
}

3. cesium使用的组件中，import后即可使用

import * as Cesium from 'Cesium'