Case environment
Vue Projects Created with Vue-cli Scaffolding
When packaging the project, I encountered the problem of the background image path error. After Google, I found that the image limit size was too small when configuring it.
First, the error point is on the url-loader.
// url-loader configuration// build/
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: ('img/[name].[hash:7].[ext]')
}
Here I will explain the above url-loader configuration. Test is a regular matching rule, matching all files in the project with format ending with regular rules. The straightforward point is the so-called picture (png, jpg, jpeg, gif, svg). Then use url-loader to process it. There is also a rule for processing as follows: When a file not exceeding 10000B is base64 transcoding, it means converting the image to base64 format. If the image exceeding 10KB is packaged separately into ('img/[name].[hash:7].[ext]') (from build/ and config/, we can know that this path is the static/img directory, and the image name is the value after hashing. There is no static directory under the root directory, so a static directory will be created. As for why we didn't see this directory in the end, we will talk about it later), after we create such a directory, the image access path becomes the corresponding static/img/'img/'img name'. At this point, we can confirm that if the image less than 10KB is converted to base64, the image greater than 10KB has changed the image path to static/img/'img/'image name', and then we continue to clarify the access path.
// Currently our directory structure
static
|--img
|--'picname'
|--css
|--
|--js
|--
We know that img is an html tag, and its path is accessed by the beginning. He can access the picture correctly by going static/img/'img/'img', so the path of img is fine, and then accessing static/img/'img' is an error, because there is no static directory in the css directory. This causes the problem of path access failure.
Solution
1. Use small pictures as background pictures (suggested):
Use pictures less than 10KB as background pictures, and if there are pictures greater than 10KB as img pictures.
2. Modify the limit value of the url-loader (not recommended):
From the above analysis, we can see that when the image is converted to base64, there is no problem with path errors. Ensuring that your background image can be converted to base64 can prevent the error from happening. Just change the limit value to the maximum value of your background image and the maximum value is a little larger, and convert it into a unit of B
3. Do not package css separately (not recommended):
It is packaged directly into js through css-loader and style-loader, and js automatically creates style tags. In this way, the access path of the background image is accessed through the path, but this solution is not recommended. It will cause js to be too large, and it is not recommended to transfer base64 if the picture is too large.
4. Use the absolute path to the image address path (suggested)
Suggestion: Use small pictures as background pictures, and use img tags for large pictures. First, we must distinguish some differences between background pictures and imgs. As far as everyone understands, background pictures are used to modify web pages. Things that have nothing to do with the actual content are used. If everything related to content should be counted as content using the img tag. The modified pictures should be as small as possible, and you can also use pictures compression and other strategies to reduce the size of the picture.
Not recommended: The reason why the limit value is not recommended is that the configuration of the url-loader is for the entire project's image. Modifying the limit value is also equivalent to allowing the image of the img tag in html to be converted to base64. The disadvantage of base64 conversion is that it will increase the original size of the image. If you convert the large image base64, your js file will be too large, which will increase the loading time of js for too long.
About base64
Advantages: Base64 is an image represented by string codes. It is loaded together when loading the page or js, reducing a separate http request when referring to the image. Students who understand web-side performance optimization know that each http request will take up a certain amount of time. For small image requests, the http request may take longer than the image download itself. Therefore, base64 transcoding of small images is a means to optimize http requests and ensure accelerated rendering of pages.
Disadvantages: The disadvantage of base64 is mentioned earlier. It will increase the size of the image itself. For small images, increasing the size leads to the increase in js requests can completely make up for the establishment time of an additional http request. This trade-off is cost-effective. But for the large picture, such a choice is not cost-effective.
Give an example
Example: (The following data are all randomly simulated, just look at the idea)
If the http time is 0.1s per time to establish http, the network transmission is 100KB/s, and the volume increase of base64 is 20% per time;
- A 10KB image is downloaded to 0.2s through http request. After it is converted to base64, it is 12KB. In js download, the size of 12KB is increased, so it is increased by 0.12S. Therefore, the page loading speed of 0.08s can be optimized;
- The speed of a 100KB image through http request is 1.1s. After base64, the size is 120KB, and it will increase the size of js by 120KB, so the loading time is increased by 1.2s. After counting this way, after converting to base64, the page loading speed cannot be optimized, but instead slows down the loading speed of 0.1s, which is not cost-effective.
think:
During the development process, in addition to handling loading speed, we also have to consider the issue of parallel downloads. If it is all in one js, the pictures are not downloaded before the download of this js, that is, after the base64 is converted, it can be considered that js and pictures are downloaded serially. With http request, the image can be downloaded in parallel with JS. So actually, smaller pictures are needed to make more cost-effective
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.