Use of System. Web. Optimization merge compression technology, webpack compression and js

Use of System. Web. Optimization merge compression technology, webpack compression and js
The principle of bundling and compression is to bind multiple css filesDynamic mergeAndCompressionIs a css file and multiple js files.Dynamic mergeAndCompressionIs a js file, so as to reduce the number of browser requests to server resource files, reduce the size of resource files to improve the page response speed. ASP. NET 4.5 and later versions support this technology (Optimization ).Usage:Download the nuget package firstMicrosoft. AspNet. Web. OptimizationAnd then configure the following:Step 1: As usual, create a class under the App_start folder. Here there is a parameter "BundleTable. enableOptimizations: If this item is not set, the System. web. optimization uses the Default policy. Merging and compression are not enabled in Debug mode. If this parameter is set, the Default policy is overwritten;

Step 2: Register under Global. Application_Start,

Step 3: View page call, which is called by Scripts. Render and Styles. Render respectively on the view page,

Note the following:

1)The virtual path name in Render ("virtualPath") cannot have the suffix of a static file, for example :"***. js ""***. css ". Otherwise, IIS will only find the corresponding static file. If no static file is found, the request fails to be processed. The virtual path name cannot be the same as the existing folder name, otherwise, IIS will be a request to browse the folder. For example, if the path "content/css" exists, the Render cannot be "content/css". Of course, this can be: "centent/css/abc";

2)When css references an image, if it is a relative path, the methods are: Only compress and not merge. Create Styles. Render for each css file, and the parent path of the virtual path of the dynamic file is the same as that of the real css file. Then, obtain an endpoint name that does not conflict with the file name to compress and merge the files. In this case, you need to create a special directory with the same name as the parent directory of the dynamic virtual directory, and then copy the images referenced by each css.
3)This function is based on the dynamically generated content js/css. in IIS, please "Enable dynamic content compression". Otherwise, the compressed file transmission may be larger than the uncompressed file transfer. By default, "static content compression" is enabled, so static files are compressed and transmitted. While the dynamic file is compressed by the code string, but does not transfer the compression processing (gzip), so the transmission of big data. ( Note:Gzip is a commonly used data compression format on the Internet, or a file format. The GZIP code on the HTTP protocol is A technology used to improve the performance of WEB applications,Generally, the plain text content can be compressed to 40% of the original size ), 4) abnormal CSS display:After some css files are merged and compressed, they will appear in the IE browser, and sometimes the display on chrome is abnormal. Some people on the Internet also say that they are in a bad situation, such as some other bootstrap.css will appear. In this case, my solution is to remove the problematic css file from the merged list and load it separately. When no css file is found and the progress is reached, the whole css list is set to not merged and compressed: BundleTable. EnableOptimizations = false; For more information about System. Web. Optimization, see: Official Website: Http://www.asp.net/mvc/overview/performance/bundling-and-minification