大图片不参与打包的核心是绕过webpack资源处理流程，可通过cdn外链、webpack排除规则或public目录托管实现，需避免import和css中不当引用以防误打包。
大图片不参与打包，核心思路是绕过 Webpack 的资源处理流程，让它们以原始路径或外部链接形式存在，而不是被识别、加载、输出到 dist 目录。
用外部 CDN 或服务器地址直接引用
最直接有效的方式：把大图上传到 CDN（如阿里云 OSS、Cloudinary、七牛）或自有静态服务器，然后在代码里用完整 URL 引用。
- Vue 模板中：
<img :src="" https:> - TS 逻辑中：
const bannerUrl = "https://cdn.example.com/images/large-banner.jpg"; - 不经过 import/require，Webpack 完全不会扫描和打包该路径
配置 Webpack 排除指定目录或文件
如果你坚持把大图放在本地 src/assets 下，但不想被打包，可以在 vue.config.js（Vue CLI）或自定义 webpack.config.js 中排除它们。
- 例如，在
vue.config.js中： chainWebpack: config => { config.module.rule('images').exclude.add(path.resolve(__dirname, 'src/assets/large-images')).end(); }- 之后把所有 >2MB 的图统一放进
src/assets/large-images/，再用相对路径引用：<img src="@/assets/large-images/map-full.jpg"> - 注意：这种方式需确保构建后该目录被手动复制到最终部署目录（如通过
copy-webpack-plugin），否则运行时 404
使用 public 目录托管静态资源
Webpack 默认会把 public 目录下的文件原样复制到 dist 根目录，不走 loader 流程，也不生成 hash。
- 把大图放进
public/images/big/earth-4k.jpg - 引用时直接写绝对路径：
<img src="/images/big/earth-4k.jpg">（注意开头的/） - TS 中也可：
const imgUrl = "/images/big/earth-4k.jpg"; - 完全跳过模块系统，无打包、无转换、无路径重写，适合超大资源
避免误触发打包的常见坑
即使你用了上述方法，仍可能因写法不当导致图片被悄悄打包：
- 不要用
import img from "./public/big.jpg"—— 这会让 Webpack 尝试处理它 - 不要在 CSS 里写
background: url("../assets/large/xxx.jpg")（除非你明确配置了 loader 处理该路径） - 动态拼接字符串路径（如
`/images/${name}.jpg`）无法被 Webpack 静态分析，但也不能用于 import，只适用于 public 路径
