Exploring the little-known secrets of ASP.NET MVC (1): Support for LESS_html/css_WEB-ITnose

In ASP.NET MVC3 (from then on), we have the ability to bundle (Bundling) and compress (Minification) files such as js and css, which is the work of ASP.NET performance optimization part.

Think about it a long time ago, when we were in the mvc2 era, we introduced js and css files in this way:

<script type="text/javascript" src="@Url.Content("~/Script/Script.js")"></script>

Why

There was no problem at first, As our projects grow larger and more resource files need to be introduced, we will inevitably encounter the following problems:

1. These files need to be replaced in the Production environment For the compressed version (e.g jQuery.xxx.min.js)
2. CSS files need to be compressed with other tools
3. More and more files are introduced, which is difficult to manage
4. A large number Resource files cause browsers to load slowly

How

After the release of ASP.NET MVC3, we no longer need to suffer from the above problems.

First of all, when we turn on the Optimizations switch, when System.Web/Compilation@debug in the Web.config file is set to false (in a production environment, it needs to be set to false), we browse The resource files obtained from the server will be compressed and bundled. The benefits of this are:

1. Reduces server-side traffic and reduces server fever (through compression)
2. Automatically caches resource files. If the server-side does not change, it will not be reloaded ( Through caching mechanism)
3. Since most browsers limit the number of simultaneous connections to a host, the website access speed is accelerated (through bundling)

The following is a simple example, I Here is a demonstration using a newly created ASP.NET MVC project:

After creating a new MVC project, open the App_Start/BundleConfig.cs file and you can see a static RegisterBundles method. This method is the same as the RegisterRoutes method. They are all called when the application is loaded for the first time. That is to say, all bundling and compression operations will be performed once when the application is loaded, and will be directly referenced in the future. After the application is started, manual intervention is required. If a resource file is registered in the bundle, MVC will only reload and compress this part.

In the body of this RegisterBundles method, you can set the BundleTable.EnableOptimizations static property. This static property is set to True by default. That is, when the website is in a production environment, files such as css and js will be bundled and compressed. , these operations will not be performed in development mode. Of course, you can also organize this behavior by setting it to False.

In the method body, you can add the files we want to bundle by calling the Add method of the BundleCollection parameter. :

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(                      "~/Scripts/bootstrap.js",                      "~/Scripts/respond.js"));

The "~/bundles/bootstrap" here is a virtual path. When we reference it in the View file, what is actually loaded is "~/Scripts/ There are two files: "bootstrap.js" and "~/Scripts/respond.js". The parameter of the Include method is a string type parameter group, so we can add any number of files and apply them in the View file in the following way. ：

@Scripts.Render("~/bundles/bootstrapr")

The bundling mechanism also supports CDN

var jqueryCdnPath = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js";            bundles.Add(new ScriptBundle("~/bundles/jquery",                        jqueryCdnPath).Include(                        "~/Scripts/jquery-{version}.js"));

Focus came

The point of this article is to directly use this bundling and compression mechanism to compile LESS. Although we can also use LESSCSS to compile LESS on the browser side, But we cannot get the compiled CSS file, and many times we need to get it to determine whether it is what we expected.

For more introduction to LESS and its advantages, see here

First, we need to add the dotless package:

After that, I In the Content directory of the project, add a StyleSheet1.less with the following code:

@color:#F7F7F7;body{    background-color:@color;}

At this time, you do not need to worry about IIS returning 404 to files with the suffix less, because The final output to the client is a compiled CSS file.

In the BundleRegister method, add the following code:

var lessbundle = new Bundle("~/bundles/less").Include("~/Content/*.less");            lessbundle.Transforms.Add(new LessTransform());            lessbundle.Transforms.Add(new CssMinify());            bundles.Add(lessbundle);

In the first line of code, we add all The suffix is ​​the bundle of less files. The second line adds the LESS conversion function, which is provided by dotless. The third line adds the function of compressing this bundle, so that we will get the compilation in the Production environment. And compressed css code;

In a production environment, you will find code similar to the following in the source code obtained by the browser:

<link href="/bundles/less?v=vnAgv976RJi72MAy6iBw7DhQ9yxBbhXMXY0yOqNN5BU1" rel="stylesheet"/>

Open this path and you will Get the compiled CSS code:

body{background-color:#f7f7f7}

In the Production environment, go one step further and remove the blank characters in the css to make the CSS file smaller, because my example is actually They're the same, so you can't tell the difference.

That’s it for this article. Things at work have been very disturbing recently. The mysophobia and sensitivity of technical people are so damn terrible. !