本文详解如何在不引入完整 bundle 的前提下，通过 es 模块方式按需加载 swiper 核心库与功能模块（如 pagination），显著减小资源体积并确保功能正常工作。
本文详解如何在不引入完整 bundle 的前提下，通过 es 模块方式按需加载 swiper 核心库与功能模块（如 pagination），显著减小资源体积并确保功能正常工作。
Swiper 自 v10 起全面转向模块化架构，官方推荐使用 ES 模块（ESM）方式按需导入核心类与独立功能模块。直接通过 <script src="..."></script> 加载 .min.js 或 .mjs 文件无法自动注册模块——这是导致你遇到 Pagination is not defined 或分页失效的根本原因：传统 script 标签不具备模块作用域和 export/import 语义，模块不会自动挂载到全局 Swiper 实例上。
✅ 正确做法是将脚本声明为 ES 模块，通过 import 显式引入所需模块，并传入 modules 配置项：
<!-- 1. 引入 Swiper 样式（必需） -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<!-- 2. 使用 type="module" 声明模块脚本 -->
<script type="module">
// 导入 Swiper 核心类（非 bundle 版本，仅含基础功能）
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';
// 按需导入 Pagination 模块（注意路径为 .mjs，且必须与 Swiper 版本一致）
import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs';
const swiper = new Swiper('.container', {
modules: [Pagination], // 必须显式传入模块数组
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
loop: true
});
</script>? 关键注意事项：
-
type="module"不可省略：这是启用 ESM 语法的前提，否则import会报语法错误； -
路径必须为
.mjs后缀：CDN 提供的模块化文件统一使用.mjs扩展名（如pagination.min.mjs），.js版本不支持 ESM 导入； -
版本号需严格一致：
swiper-bundle.min.mjs与pagination.min.mjs必须来自同一 Swiper 版本（如@11），混用会导致兼容性问题； -
CSS 仍需单独引入：模块化加载不包含样式，务必通过
<link>加载swiper-bundle.min.css（或自定义 CSS）； -
避免混合加载方式：不要同时引入
swiper.min.js（UMD）和.mjs模块——它们运行在不同模块系统中，无法互通。
? 进阶提示：若需多个模块（如 Navigation、Autoplay、Thumbs），可链式导入：
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';
import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs';
import Navigation from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.mjs';
import Autoplay from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/autoplay.min.mjs';
const swiper = new Swiper('.container', {
modules: [Pagination, Navigation, Autoplay],
pagination: { el: '.swiper-pagination' },
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
autoplay: { delay: 3000 }
});通过模块化加载，你可将 Swiper 包体积从 ~150 KB（bundle）降至 ~60 KB（core + 2–3 个模块），大幅提升首屏加载性能，同时保持代码清晰与可维护性。
