Astro构建后dist目录资源重复，如何避免？

问题根源 #

你遇到的资源重复是因为Astro对public和src/assets目录的处理逻辑不同：

• public目录下的文件会原封不动复制到dist根目录，不会做优化或哈希命名
• 通过import或Astro资源工具引用的src/assets下的文件，会被处理后放到dist/_astro目录，同时生成哈希文件名、做格式优化

如果同一个资源既放在public又通过src/assets引用，就会导致重复打包。

解决方案 #

1. 规范资源存放目录 #

• 将需要优化、哈希处理的图片/视频等媒体资源，统一放到src/assets目录下，不要放到public
• 仅将无需处理的静态资源（如favicon.ico、robots.txt、第三方CDN脚本）保留在public目录

2. 正确引用媒体资源 #

基础引用方式

在组件或页面中通过import导入资源，然后在模板中使用：

// 导入资源
import HeroImage from '../assets/hero.jpg';
import DemoVideo from '../assets/demo.mp4';

---
<!-- 在模板中使用 -->
<img src={HeroImage} alt="首页英雄图" />
<video src={DemoVideo} controls loop></video>

图片优化引用（推荐）

使用Astro内置的astro:assets工具对图片做格式转换、缩放等优化：

import { getImage } from 'astro:assets';

// 异步获取优化后的图片
const optimizedHero = await getImage({
  src: '../assets/hero.jpg',
  width: 1200,
  format: 'webp' // 转换成webp格式减小体积
});

---
<img src={optimizedHero.src} alt="优化后的英雄图" width={optimizedHero.width} />

3. 清理冗余内容 #

• 删除public目录下与src/assets重复的图片/视频文件
• 检查所有页面和组件的资源引用，确保没有同时使用/xxx.jpg（public路径）和import方式引用同一个资源

4. 验证构建结果 #

执行yarn build后，查看dist目录：

• dist/_astro下会有处理后的哈希命名媒体资源
• dist根目录仅保留public下的必要静态资源，无重复的媒体文件

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