---
title: "性能、CSP 与无障碍"
description: "ScriptMapLibreMap 默认会在视口附近加载，并在 SSR 期间保留其配置的尺寸。SDK、样式表、Web Worker、样式和图块在触发条件运行之前都不会访问网络。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/maplibre/guides/performance-csp-and-accessibility"
last_updated: "2026-08-11T09:33:18.141Z"
---
`ScriptMapLibreMap` 默认会在视口附近加载，并在 SSR 期间保留其配置的尺寸。SDK、样式表、Web Worker、样式和图块在触发条件运行之前都不会访问网络。
## 加载策略
对于位于首屏以下的地图，使用默认的 `visible` 触发器：
```vue
```
当地图是页面的主要内容时立即加载：
```vue
```
始终提供高度，以确保 SSR 和客户端首次渲染使用相同的布局：
```vue
```
## WebGL 和加载失败
MapLibre 需要 WebGL 以及样式所引用的多个资源。对于不支持 WebGL 的浏览器，以及网络或初始化失败的情况，请使用 `error` 插槽：
```vue
路线地图不可用。请改为查看配送状态列表。
```
将重要地点、路线状态和操作保留在常规 HTML 中，而不要依赖画布。
## 无障碍
为每个交互式地图提供有用的 `aria-label`。使用 `description` 插槽描述屏幕阅读器用户需要了解的地点、路线或链接，并为每个标记提供唯一的 `aria-label`。
```vue
快递员目前在码头区，正前往弗林德斯巷。
```
对于装饰性地图，请设置 `:interactive="false"`。该组件会禁用输入操作，将地图从无障碍树中移除，并使其后代元素处于非活动状态。
## 样式表加载
Nuxt Scripts 会在 SDK 开始加载时注入其版本固定的 MapLibre 样式表。若要改为将样式表与应用一同打包，请使用以下方式：
```ts [nuxt.config.ts]
export default defineNuxtConfig({
css: ['maplibre-gl/dist/maplibre-gl.css'],
})
```
```vue
```
## 内容安全策略
标准的 MapLibre 构建版本会创建一个 Blob worker。其文档中的 CSP 包含 `worker-src blob:`、`child-src blob:` 和 `img-src data: blob:`，以及样式所使用的来源。
对于不允许使用 Blob worker 的策略，请自行托管 MapLibre 的 CSP 构建版本和 worker：
```ts [nuxt.config.ts]
export default defineNuxtConfig({
scripts: {
registry: {
maplibre: {
scriptInput: { src: '/maplibre-gl-csp.js' },
},
},
},
})
```
```vue
```
将样式、切片、精灵图、字形和 worker 的来源添加到策略中相匹配的指令。完整要求请参阅 MapLibre 的 [CSP 指令](https://maplibre.org/maplibre-gl-js/docs/#csp-directives)。