Question - why static asset logo.png is in the src/assets folder instead of static folder

[genyded]

I was going to open an SO question for this, but this really is specific to this repo. I am only a few hours into using Vue (and so far am loving it) and was wondering if there is a reason or difference in placing assets such as images in the src folder versus the static folder? Most examples I have seen have thing like logo.png in the static folder (maybe under a sub-folder). This one has logo.png in the src/assets folder. Is there a reason behind that or does it really matter as long as it's imported from the correct place?

AKA - does Vue or webpack treat these any based in where they are located between static or src? Just want to be sure before I shoot myself in the foot over something as simple as app structure.

Thanks!

[chrisvfritz]

The question is actually specific to this repo and it's addressed in that repo's docs.

[xerosanyam]

Hello. Even though the question is addressed in the repo's docs. I doesn't mention the use of assets over static and vice-versa.

The use of static over assets is that URL is not changed and it performs better as browser already has the cached image.
However, over the period of development, the static folder builds up because of which, whenever you push to cloud, whole dist folder is pushed, here comes the use of asset folder. As vue-loader loads file on request basis, the size of dist folder remains small.

[Akryum]

The use of static over assets is that URL is not changed and it performs better as browser already has the cached image.

Assets processed by weback will have the same URL as long as the content is the same, also taking advantage of the browser cache. By using static, you loose the automatic hash generated by webpack in the URL and it's more difficult to change the base URL in your code. By using webpack, you can also automatically convert small images to data-url in base64 to avoid small unwanted network requests thanks to the url-loader.

tl:dr Just use webpack for your assets and put them in the src folder.

[xerosanyam]

Thanks. Understood by replacing an image and checking the URL and undoing it and checking the URL again.

[xerosanyam]

For future reference, url-loader and file-loader use fingerprinting, which is:

Fingerprinting is a cache-busting technique which allows you to expire files when they actually change this is done by altering the filenames of the files. This way you can set far future expire headers without having to worry that your users might see stale or old files. Providing you with best of 2 worlds, cached assets for increased performance with sacrificing your ability to instantly modify files.

[manuelmejiaio]

A more detailed explanation of what @Akryum is saying:

https://edicasoft.com/weblog/2018/04/27/static-vs-srcassets-webpack-template-vue-cli/