vite让cesium配置更加简单

从vue2到vue3，配置Cesium对于GISer开发人员来说都是非常麻烦的一件事，不像openlayers，只需要npm i ol一下就可以直接使用，下面展示一下vue3使用webpack配置cesium的代码。

const CopyWebpackPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "node_modules/cesium/Build/Cesium/Workers",
            to: "Workers",
          },
          {
            from: "node_modules/cesium/Build/Cesium/ThirdParty",
            to: "ThirdParty",
          },
          {
            from: "node_modules/cesium/Build/Cesium/Assets",
            to: "Assets",
          },
          {
            from: "node_modules/cesium/Build/Cesium/Widgets",
            to: "Widgets",
          },
        ],
      }),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(""),
      }),
    ],
    module: {
      unknownContextCritical: false,
      unknownContextRegExp:
        /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
    },

需要手写非常多的代码，对于小白来说非常的不友好。使用Vite的话，需要安装两个插件，在开发依赖中安装vite的专用插件vite-plugin-cesium，使用npm i vite-plugin-cesium -D，在依赖依赖中安装cesium即可npm i cesium，不然会出现在开发时能正常运行，在打包出生产依赖以后会报错的情况。安装完成以后在vue.config.js中更改配置。

import cesium from 'vite-plugin-cesium';
plugins: [
  vue()
  cesium()
]

在vite-plugin-cesium的源码当中可以看到，他是自带cesium的包的，但是也最好尽快安装cesium的包。在看过多个人的vue3使用webpack打包都有多多少少的差异，导致最后的打包文件可能会更大会更乱，而vite打包会生成一个交cesium的文件夹，但是可能会导致打包后的dist文件大小更大。

vite的还有一个优势在于，开发cesium的项目时更快，而你更新代码时不需要重新加载整体打包。关于vite的一段官方介绍。

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

关于Vite配置Cesium的插件

vite让cesium配置更加简单