ASP. NET Core MVC compression style, script details, coremvc
Preface
In. before, we may need to use a third-party tool to compress the style files and scripts. net mvc Core does not require third-party tools. In this section, let's take a look at ASP. NET Core MVC provides us with convenience.
Automatic compression of styles and scripts
When we do not need to compress the script in the test environment, if the script is compressed, It is not conducive to debugging if an error occurs in the console, however, in the production environment, we can reduce transmission traffic by compressing scripts or styles. Second, we can accelerate the page loading time. In other words, in this case, we need to test the native version and the compressed version corresponding to the production environment. NET Core MVC? Read down.
We put some static files such as scripts, styles, and images in the directory of the wwwroot website. At this time, we first need to add the bower. json file to download the required script and version, as shown below:
{ "name": "asp.net", "private": true, "dependencies": { "jquery": "2.2.3", "bootstrap": "3.3.6" }}
When you add the required scripts and styles to a node in this json file, the downloaded scripts and styles are automatically added to the website directory folder as follows:
Of course, you can also right-click and manage the Bower package to download it and it will be automatically restored to the website directory folder. Now we have all the scripts and styles we want. Next we need to introduce the scripts and styles in the view. ASP. NET Core MVC provides three environments for loading styles and scripts: Development, Staging, and Production. Development is the Development environment, Staging is the test version before the release, and Production is the release version. How can we use it in the view? We use names on the environment node to specify the above three environments, as shown below:
<Environment names = "Development"> .. development environment-load scripts and styles </environment> <environment names = "Staging, Production"> .. prepare and release the environment-load scripts and styles </environment>
The following describes how to load the JQuery script and Bootstrap style as follows:
<Html>Let's see whether the page loading result is as expected.
It's a little embarrassing. It's all loaded. In what case, we found that we still need to add TagHelper at the top of the page, as shown below:
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpersThere is no problem with this. We haven't explained a little before. How does ASP. net mvc Core detect the names value we set on the environment node? We need to specify the environment in the Profiles node in launchSettings. json, as follows:
"profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "launchUrl": "Home/Index", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "IIS Express (Production)": { "commandName": "IISExpress", "launchUrl": "Home/Index", "launchBrowser": true, "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Production" } } }At this point, we can see the following runtime environment when running the application.
At this time, some people asked, we are. NET Core, you can manually write code to load the script and style version, in ASP. can NET Core MVC be implemented? If so, of course, the following is true.
<environment names="Staging,Production"> <script src="~/lib/jquery/dist/jquery.min.js" asp-append-version="true"></script> <script src="~/lib/tether/dist/js/tether.min.js" asp-append-version="true"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.min.js" asp-append-version="true"></script> <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" asp-append-version="true" rel="stylesheet" /></environment>Is it wonderful. NET Core, we only need to add the asp-append-version = "true" attribute ,. NET Core automatically helped us to add version control, and it was refreshing. At this point, we have finished more than half of the automatic compression scripts and styles, but I don't know what you 've found here. we added the package, the compression version is automatically included. If we have to compress the script and style after writing the script and style, proceed with the following steps.
Before manually writing our own scripts and styles, We need to search for and install the Web Essentials package in the package. I have installed the package. You can see the Web Essentials package in extensions and updates, as follows:
Create a js folder under the website directory folder and add the script of JeffckyWang. js. The following script is provided:
(Function ($) {"use strict"; alert ("Learning automatic compression scripts and styles") ;}) (jQuery );As we have added the Web tials essenpackage, right-click the JeffckyWang. js script and you will find the menu for automatic compression, as shown below:
After compression, we expand the JeffckyWang. js script to include our compressed JeffckyWang. min. js script, as shown below:
Copy the file to the output directory
Before. NET Core, we can create a file to copy the file property to the debug or release directory under the bin directory. For example, we create an install. bat file. In versions earlier than. NET Core, we can manually set it as follows:
In this case, if we set it to always copy, copy it to the debug or release directory. However, the attributes in. NET Core are as follows:
In the project encountered this problem instantly forced, thought, since in. NET Core is based on the configuration, so whether it is in the project. json can be configured as follows.
"buildOptions": { "emitEntryPoint": true, "preserveCompilationContext": true, "copyToOutput": [ "install.bat" ] },We only need to add a copyToOutput node under the buildOptions node, which is an array and add the corresponding file path. In this case, the file is displayed in the debug or release directory, as shown below:
Summary
This section describes. NET Core, how to automatically compress scripts and styles, and how to automatically copy files to the output directory is a small summary of the project. I hope you can help me read this article.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
