react-leaflet开发环境正常，生产构建后地图消失如何解决？

• 修正CSS引入方式
  不要在HTML文件中直接引入./node_modules/leaflet/dist/leaflet.css，生产构建后输出目录不存在node_modules文件夹，该路径必然404，样式缺失会导致地图容器高度为0直接消失。正确做法是在项目入口文件（如index.js/main.jsx）中通过import引入：

  import 'leaflet/dist/leaflet.css'
  

  打包工具会自动将该样式抽离到构建产物中，路径不会出现异常。
• CDN引入适配
  如果你选择用CDN引入leaflet资源，需要先删除package.json中安装的leaflet依赖，避免出现两个leaflet实例冲突的问题。同时要保证react-leaflet版本和CDN引入的leaflet版本兼容：react-leaflet v3/v4版本对应leaflet 1.7.x以上版本，版本不匹配会导致生产环境渲染失败。
• 检查样式优先级
  生产环境构建时样式的合并、压缩可能会导致行内样式优先级被全局样式、CSS Modules、styled-components样式覆盖。你可以打开生产环境控制台，选中地图容器DOM，查看实际宽高是否为0，如果是可以在全局样式文件中添加如下代码强制指定容器尺寸：

  .leaflet-container {
    width: 100vw;
    height: 100vh !important;
  }
  

• 避免tree-shaking异常
  如果你使用vite、webpack5这类开启了严格tree-shaking的打包工具，可能会误删leaflet的部分必要代码或样式。你可以在package.json中添加如下配置，避免leaflet样式被tree-shaking移除：

  "sideEffects": ["leaflet/dist/leaflet.css"]
  

  也可以在打包配置中将leaflet标记为外部依赖，不参与项目打包，直接使用CDN引入的全局实例。

内容的提问来源于stack exchange，提问作者joseph smith