Geekly Articles each Day
📜 ⬆️ ⬇️

Minimize Javascript and CSS with Microsoft Ajax Minifier

Downloading volume resources associated with a web page, such as JavaScript files and CSS, affects not only the page loading speed, but also increases traffic from the server to the client browser. The latter circumstance is especially important in connections with a limited tariff or when hosting a site on a hosting with a predetermined amount of outgoing data.

One way to deal with extra bytes is to compress the data on the server and transfer the gzipped stream to the browser, which already unpacks it while the page is being rendered. Discussion of this method is not included in this article. I would like to talk about how to reduce data by removing all insignificant characters from the accompanying web page files: JavaScript and CSS - minimization.

When writing client-side functions and site styles, the programmer / designer uses string strings or tabs to improve the readability of the text and ease of maintenance. It is more convenient to catch an error that occurred in the middle of a 100-line file, when the code is structured and formatted in a way that is familiar to the language. CSS rules and JavaScript functions will work the same way, we place them all on one line or by placing each rule on a separate line.

Data readability delights are just superfluous when the site goes to the Internet. On the other hand, if there are several files that require minimization, the process of transforming readable files into a minimized format is not easy and requires automation.
')
On February 16, 2010, Microsoft released the fourth version of its utility called Microsoft Ajax Minifier, the task of which is to simplify and automate the transformation of readable JavaScript and CSS files into a minimized format. This utility can be used either from the command line or from our own program in the .NET language (not included in this article), or using the MSBuild system when developing in Microsoft Visual Studio (I work with VS 2008).

After installing Microsoft Ajax Minifier, you can add a task for MSBuild to projects created on the basis of embedded web projects, such as ASP.NET Web Application. Sites added to the studio as a Web site are not suitable because they do not have a .proj file in which MSBuild tasks are installed.
  1. Select the Unload Project item in the context menu of the site project.
  2. In the context menu of the already shipped project, select Edit project name ; Visual Studio displays the * .proj file for editing.
  3. Write the following code inside the <Project> tag:
    < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    1. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    2. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    3. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    4. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    5. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    6. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    7. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    8. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    9. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    10. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    11. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    12. < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .
    < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> < Target Name ="AfterBuild" > < ItemGroup > < JS Include ="**\*.js" Exclude ="**\*.min.js;Scripts\*.js" /> </ ItemGroup > < ItemGroup > < CSS Include ="**\*.css" Exclude ="**\*.min.css" /> </ ItemGroup > < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" /> </ Target > * This source code was highlighted with Source Code Highlighter .

  4. The context menu item of this project Reload Project will return the site to Visual Studio and, now, you can do a Build (or Rebuild) for testing.
  5. It is important to make the studio display files that are not included in the project ( Project menu , Show All Files ).
  6. It is also important to click on Refresh after the project is compiled, otherwise the studio will not show the minimized files added by the MSBuild task.
  7. If there is no error anywhere, the minimized files will be displayed in the project file structure as not belonging to this project. The choice of whether to include their project is yours. Since I just copy files from the developer’s computer to FTP, the generated files in my project are not included.


For those who are not familiar with the language of MSBuild'a - a brief explanation of paragraph 3:
  1. To enable new tasks installed with Microsoft Ajax Minifier
    < Import Project ="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

    * This source code was highlighted with Source Code Highlighter .

  2. Announcement of the job, run after the project is successfully compiled
    < Target Name ="AfterBuild" >

    * This source code was highlighted with Source Code Highlighter .

  3. Declaring groups of files over which we want to transform - minimizing them. Tags <JS> and <CSS> - the name of groups of files. These names are determined by you, you can write <JS> or <JSFiles>, or even <MinimizeThis>. In this case, we want to minimize all files with the ending .js and .css in the project, except those ending in .min.js or .min.css, or are located in the Scripts folder.
    1. < ItemGroup >
    2. < JS Include = "** \ *. Js" Exclude = "** \ *. Min.js; Scripts \ *. Js" />
    3. </ ItemGroup >
    4. < ItemGroup >
    5. < CSS Include = "** \ *. Css" Exclude = "** \ *. Min.css" />
    6. </ ItemGroup >
    * This source code was highlighted with Source Code Highlighter .

  4. Run the task to minimize. Groups of JavaScript and CSS files for minimization are indicated by the names given in previous lines (<JS> and <CSS>). The files to be minimized and the extension for newly compressed files are specified in the attributes JsSourceExtensionPattern , CssSourceExtensionPattern and JsTargetExtension , CssTargetExtension , respectively.
    < AjaxMin JsSourceFiles ="@(JS)" JsSourceExtensionPattern ="\.js$" JsTargetExtension =".min.js" CssSourceFiles ="@(CSS)" CssSourceExtensionPattern ="\.css$" CssTargetExtension =".min.css" />

    * This source code was highlighted with Source Code Highlighter .



The task has a number of additional parameters:
  1. JsCollapseToLiteral= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Translates new Object () to {} , new Array () to [] .
  2. JsCombineDuplicateLiterals= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Substitutes a local variable instead of duplicate string or numeric values ​​in the code.
  3. JsEvalTreatment= "MakeAllSafe|Ignore|MakeImmediateSafe"

    * This source code was highlighted with Source Code Highlighter .

    Indicates whether it is possible to apply the method of renaming functions and local variables in code using eval . This setting should be avoided when the nature of the code in eval is not clear or may change.
  4. JsIndentSize= " number "

    * This source code was highlighted with Source Code Highlighter .

    When JsOutputMode = “MultipleLines” , specifies the number of spaces to peel into nested constructs.
  5. JsInlineSafeStrings= "true|false"

    * This source code was highlighted with Source Code Highlighter .

  6. JsLocalRenaming= "CrunchAll|KeepAll|KeepLocalizationVars"

    * This source code was highlighted with Source Code Highlighter .

    The degree of application of the method of renaming local variables and functions. When JsLocalRenaming = "KeepLocalizationVars" , variables beginning with L_ will not be renamed.
  7. JsMacSafariQuirks= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Support for JavaScript engine requirements in Safari for Mac.
  8. JsOutputMode= "SingleLine|MultipleLines"

    * This source code was highlighted with Source Code Highlighter .

    It allows you to minimize the code, while maintaining some readability, although all other methods of minimization (renaming local variables, for example) will still be applied.
  9. JsRemoveFunctionExpressionNames= "true|false"

    * This source code was highlighted with Source Code Highlighter .

  10. JsRemoveUnneededCode= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Removes code that is not involved in the program execution process ( unreachable code ).
  11. JsStripDebugStatements= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Removes calls to: debugger , $ Debug , Debug , Web.Debug or Msn.Debug , WAssert .
  12. CssColorNames= "Strict|Hex|Major"

    * This source code was highlighted with Source Code Highlighter .

    Indicates the possibility of substituting the name of the color instead of the RGB code, if the given name is shorter ( CssColorNames = "Strict" ).
  13. CssCommentMode= "None|All|Hacks"

    * This source code was highlighted with Source Code Highlighter .

    Indicates the possibility of minimization due to CSS comments. CssCommentMode = "Hacks" , for example, will leave only conditionally commented CSS hacks in the code.
  14. CssExpandOutput= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Allows you to minimize the code, while maintaining some readability when the code will be presented in several lines, instead of one.
  15. CssSeverity= " number "

    * This source code was highlighted with Source Code Highlighter .

    Indicates which CSS inaccuracies will be displayed as errors.
  16. CssTermSemicolons= "true|false"

    * This source code was highlighted with Source Code Highlighter .

    Controls the semicolon after the CSS rules.


It should be borne in mind that compiling such a project - with Microsoft Ajax Minifier tasks - requires installation of this utility on all machines involved in the compilation process.

References:
  1. Microsoft Ajax Minifier website: http://aspnet.codeplex.com/releases/view/40584
  2. Learn how to use Microsoft Ajax Minifier: http://www.asp.net/ajaxlibrary/AjaxMinQuickStart.ashx
  3. MSBuild task settings for Microsoft Ajax Minifier: http://www.asp.net/ajaxLibrary/AjaxMinTask.ashx


In continuation of the topic I want to write an article about using the next generation of client libraries from Microsoft - the Microsoft Ajax Library, in conjunction with the usual and minimized JavaScript files, depending on the configuration.

Source: https://habr.com/ru/post/86067/

More articles:


All Articles