面试题之assets和static的区别

本文探讨了在Vue项目中src/assets和static目录的区别。assets用于存放需要webpack处理的静态资源,如样式和js文件,打包时会被压缩和格式化。而static则用于放置第三方静态资源,不走打包流程,直接上传。建议根据资源类型和需求选择合适的位置,以优化项目性能和服务器空间。内容还涵盖了webpack如何处理静态资源、URL规则以及在JavaScript中引用资源的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在项目结构里,有两个资源文件的路径,分别是:src/assets 和 static/。那这两个到底有什么区别呢?
简单的讲,static放别人家的,不会变动的,第三方资源(第三方比如jQuery,swiper等),assets放自己写的(自己写的样式及js文件等)
相同点
assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点
不同点
assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。
static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
建议
将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传。
当然具体情况,具体分析,在不同的开发环境,不同的需求下,大家应针对不同具体情况采用合适方式。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值