内嵌资源是否被离线包无条件打包，取决于其路径是否被构建工具识别为静态资源：所有相对路径的src、href、data-属性值及html注释中的路径字符串，只要匹配常见资源后缀，均会被正则或简单ast扫描捕获并打入包体，无论实际是否使用。
内嵌资源（src、href、data- 属性值）是否被离线包打包，直接决定最终 APK/IPA 体积是否失控。关键不是“能不能用”，而是“会不会被原封不动打进包里”。
哪些内嵌资源会被离线包无条件打包？
离线打包工具（如 uni-app、Taro、Capacitor 的本地构建流程）默认把 HTML 中所有相对路径的静态资源视为“需包含资源”，不管是否真实用到：
-
src="js/app.js"、href="css/main.css"：只要路径存在且可读，100% 打入 assets -
src="images/logo.png"：即使图片实际未展示，也会进包；若路径是../assets/icon.svg，还会递归扫描上级目录 -
这类懒加载标记，只要属性值是相对路径，多数打包器照打不误 - 特别危险的是
srcset：比如srcset="img@2x.jpg 2x, img@3x.jpg 3x"，两个文件都会被打包，哪怕只在高 DPR 设备上用一个
为什么 data- 属性和注释里的路径也进包？
因为主流离线打包器（如 HBuilderX 的本地打包、uni-app cli 的 build:app-plus）底层用的是正则或简单 AST 扫描，不是真正解析 DOM 或执行 JS。它们识别“路径特征”而非语义：
- 匹配形如
"[^"]+\.(js|css|png|jpg|webp|woff2)"的字符串，不管它在data-src、data-bg、HTML 注释甚至<!-- ./fonts/inter.woff2 -->里 - 注释中写
<!-- fallback: /api/v1/data.json -->，JSON 文件也会被当成资源打入包体 - Vue/Svelte 模板中的动态绑定如
:src="iconMap[status]"不会被识别（因为是运行时），但硬编码字符串仍会触发打包
如何让内嵌路径“不进包”？
核心思路是切断打包器的路径识别逻辑，同时保证运行时仍能加载——不是删掉资源，而是让它“不可见”：
- 把路径拼成两段：
src="js/" + "app.js"→ 改为src="js/app.js?_no_pack=1"，多数打包器忽略带查询参数的路径（但需后端配合返回正确 MIME） - 用 base64 内联小资源：
src="data:image/svg+xml;base64,PHN2Zy4uLg=="，完全绕过文件系统扫描 - 对 CDN 资源强制加协议：
src="https://cdn.example.com/logo.png"，绝对 URL 默认不打包（注意：不要写//cdn.example.com，部分工具仍会误判） - 大视频/非首屏资源改用 JS 动态注入：
el.setAttribute('src', videoUrl)，确保初始 HTML 里不出现该路径字符串
容易被忽略的体积陷阱
最常被低估的是字体和图标资源。一个 @font-face 声明里引用了 4 个 woff2 文件，每个 80KB，光字体就吃掉 320KB；而打包器根本不会判断你实际只用了其中 2 个字重：
-
@import url('./fonts/inter.css');→ 整个 CSS 文件及其@font-face引用全部打包，包括未使用的font-weight: 100和900 -
<link rel="preload" href="fonts/inter-bold.woff2" as="font" crossorigin>→ 即使只是预加载，该字体文件仍会被打进离线包 - SVG Sprite 文件（
icons.svg）若含 50 个图标，哪怕页面只用 3 个，整个 SVG 仍全量打包
离线包体积膨胀很少源于代码本身，而在于打包器对“路径字符串”的无差别捕获。控制它的第一道防线，不是压缩，而是让路径在构建期“不可见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
