版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zgh0711/article/details/82841885
在 Vue 项目中，静态资源文件有二个位置可以存放，分别为 src 里面的 assets 文件夹和外层的 static 文件夹，从文件夹名字上面就可以大概的看出有何区别。
- assets ：资产，资源
- static ：静态的
同样都是放资源的位置，为什么会有二个地方，他们之间有什么区别呢？
在我原来的项目里面，我都是把各种资源文件放到 assets 里面，这样在打包的时候 webpack 会自动把资源给你压缩，比如把 png 图片压缩成 base64 格式，当时觉得这样好啊，自动压缩资源，减小项目体积，好东西。
然而在今天，我的这个做法被人实力打脸了，，，
最近入职了新公司，这二天在查看新公司项目代码，发现他们的各种资源文件都是放在 static 下面的，我就去问了，为什么不把资源放在 assets 里面，人家告诉我的理由如下：
将资源放到 static 里面是为了缓存的需要，放在 static 里面的文件，浏览器会自动为其设置缓存逻辑，在初次请求获取到资源以后，后续再请求相同的资源就会按照浏览器的默认缓存策略来处理，比如说如果资源没有更新，那么就会返回 304，浏览器会直接从缓存里面拿这个资源，减少了请求，这也算是项目的一个优化点。
如果是把资源放到 assets 里面，虽然会被压缩，但是每次请求的时候都会直接向服务器获取新的资源文件，这其实是一个很大的资源浪费，所以在打包体积和重复请求数的权衡上面，我们选择了后者。
通过这件事，我学到了不少，所以记录下来。
另外，关于缓存相关的知识，可以看下这篇文章 https://www.jianshu.com/p/75ff40c61665