Recently, I used VS2017 to build an MVC project. The project referenced bootstrap by default. When debugging, I found that the page display was extremely slow. F12 called up the development console to see it, it was a pit! !
This NM is a slow death rhythm, so I immediately started to localize the font files. The following are the detailed steps.
1. Find the bootstrap.css file in the Content folder in the project
2. Open and find the top @import url(" https://fonts.googleapis.com/css?family=Roboto:300,400,500,700 "); line
3. Request this url in the browser and get the following
4. Copy all the above content, open Notepad and paste, save it as a gstatic.css file, and put the gstatic.css file in the Content folder of the project (in the same directory as bootstrap.css)
5. Open the gstatic.css file, request the link in the browser, download all the woff2 files
after download
6. After all files are downloaded, put all .woff2 files into a folder named gstatic and place them under the fonts folder in the project
7. Modify the @import in the bootstrap.css file to point to the local gstatic.css file, that is, replace the original https://fonts.googleapis.com/css with ../Content/gstatic.css
8. Modify the gstatic.css file and replace all the font reference urls in it with the gstatic path of the local font folder, as shown in the figure
Before replacement:
After replacing:
All other links in gstatic.css are handled similarly.
9. OK, you're done, debug it
This is the original request duration
This is now and the page loads normally.
I hope to give some help to .net developers who have just started bootstrap. There is an expert article on the Internet that is not written carefully enough, so I wrote it in detail according to the steps.