在刚刚接触vue项目开始,使用vue-cli搭建vue项目,在目录中看到static这个文件夹之后就条件反射将静态文件放在这个文件夹之下。后来在研究别人写的一个完整的vue项目的时候发现他的静态资源文件是放在src吓得assets下的,在强烈的好奇感之下,进行了一番研究。发现这个文件夹里面的图片在发布以后会出现一部分图片直接放在打不后版本的文件夹里,一部分不见了。后来才发现这个文件夹把一部分文件进行了base64编码成css样式了,一部分还是静态资源图片,在好奇之下我找了下原因

      图片base64编译的需求场景和优缺点

      图片在进行base64编码后悔变成css文件里面的样式,在加载图片的时候会减少加载图片是的http请求。但当一个样式超过了2000个字节的时候也是相当影响性能的

 

    这也是为什么在同一个文件夹有的图片进行了base64编码,有的没有编码。这些webpack打包发布vue项目的时候会自己进行判断,然后处理图片是否进行base64编码,这也是别人这个项目为什么把静态图片资源放在src/assets这个文件夹里面的原因

Logo

前往低代码交流专区

更多推荐