web性能优化之压缩与缓存js、css文件

一、压缩

网上有很多关于js、css文件压缩的介绍。我也来凑凑热闹，嘻嘻。

我使用的是Microsoft Ajax Minifier、以及批处理命令。

首先，在本机安装Microsoft Ajax Minifier。双击AjaxMinSetup.msi，傻瓜式安装。
然后，建立bat文件。

压缩JS.bat

@echo off

rem 定义变量
rem AjaxMinSetup.msi安装磁盘
set disk_path=D:
rem AjaxMinSetup.msi安装路径
set ajaxMinifierExe_path=D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\
rem 源文件目录
set source_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\js
rem 压缩文件目录
set min_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\jsMin
rem 修改日期
set edit_date=20170801
rem 文件类型
set suffix=js

rem ----------------------------------------------------------------------------------------------------

rem 复制文件，从source_path中复制修改日期大于或等于edit_date的文件到min_path中
rem /XX 排除多余的文件和目录。
rem /MAXAGE:n 最长的文件存在时间 - 排除早于 n 天/日期的文件。
rem /S 复制子目录，但不复制空的子目录。
robocopy  /XX /MAXAGE:%edit_date% /S %source_path% %min_path%

rem ----------------------------------------------------------------------------------------------------

rem 压缩文件
rem 切换磁盘
%disk_path%
rem 切换目录
cd %ajaxMinifierExe_path%
rem 遍历min_path所有suffix类型文件，压缩并覆盖该文件
rem for /R "%min_path%" %%s in (*.%suffix%) do (ajaxmin "%%s" –out "%%s")
rem 高压缩方式（暂时不确定跟前面一行的区别哈哈）
for /R "%min_path%" %%s in (*.%suffix%) do (ajaxmin -a -h "%%s" -o "%%s")

pause

压缩CSS.bat

@echo off

rem 定义变量
rem AjaxMinSetup.msi安装磁盘
set disk_path=D:
rem AjaxMinSetup.msi安装路径
set ajaxMinifierExe_path=D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\
rem 源文件目录
set source_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\css
rem 压缩文件目录
set min_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\cssMin
rem 修改日期
set edit_date=20170801
rem 文件类型
set suffix=css

rem ----------------------------------------------------------------------------------------------------

rem 复制文件，从source_path中复制修改日期大于或等于edit_date的文件到min_path中
rem /XX 排除多余的文件和目录。
rem /MAXAGE:n 最长的文件存在时间 - 排除早于 n 天/日期的文件。
rem /S 复制子目录，但不复制空的子目录。
robocopy  /XX /MAXAGE:%edit_date% /S %source_path% %min_path%

rem ----------------------------------------------------------------------------------------------------

rem 压缩文件
rem 切换磁盘
%disk_path%
rem 切换目录
cd %ajaxMinifierExe_path%
rem 遍历min_path所有suffix类型文件，压缩并覆盖该文件
rem for /R "%min_path%" %%s in (*.%suffix%) do (ajaxmin "%%s" –out "%%s")
rem 高压缩方式（暂时不确定跟前面一行的区别哈哈）
for /R "%min_path%" %%s in (*.%suffix%) do (ajaxmin -a -h "%%s" -o "%%s")

pause

解压JS.bat

@echo off

rem 定义变量
rem AjaxMinSetup.msi安装磁盘
set disk_path=D:
rem AjaxMinSetup.msi安装路径
set ajaxMinifierExe_path=D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\
rem 压缩文件目录
set min_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\jsMin
rem 文件类型
set suffix=js

rem ----------------------------------------------------------------------------------------------------

rem 切换磁盘
%disk_path%
rem 切换目录
cd %ajaxMinifierExe_path%
rem 遍历min_path所有suffix类型文件，解压并覆盖该文件
for /R "%min_path%" %%s in (*.%suffix%) do (ajaxmin -pretty "%%s" -clobber -o "%%s")

pause

以下变量请根据实际情况修改

rem AjaxMinSetup.msi安装磁盘
set disk_path=D:
rem AjaxMinSetup.msi安装路径
set ajaxMinifierExe_path=D:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\
rem 源文件目录
set source_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\js
rem 压缩文件目录
set min_path=C:\Users\ucs_maiaimei\Desktop\ajaxmin压缩JS或CSS\test\jsMin
rem 修改日期
set edit_date=20170801

二、缓存

当用户访问某个页面时，浏览器会在用户磁盘上对所请求的静态文件进行存储，
当用户再次请求这个页面时，浏览器就可以从本地磁盘读取文件，
这样就可以节约网络资源、加速页面的渲染，提高用户体验。

任何事情都有两面性，浏览器缓存有利也有弊。
大多数网站的js、css文件，并不是一成不变的，如果服务器修改了某个文件，而客户端还是使用缓存中的旧文件，那页面就有可能报脚本错误...

如何防止浏览器缓存？我们一般是加版本号。如下：

<link type="text/css" rel="stylesheet" href="/css/comm.css?v=1.0.5" />
<script type="text/javascript" src="/js/jquery-3.0.0.min.js?v=1.0.5"></script>

一个页面，往往引用一个或以上的js、css文件，这时候，上面两行代码就会被复制粘贴若干次。
作为一名搬砖的，也是有追求的。

<link type="text/css" rel="stylesheet" href="某css文件相对路径" />
<script type="text/javascript" src="某js文件相对路径"></script>

除了路径外，其他都是固定字符，我们可以来做下封装。

/// <summary>
        /// js文件根目录
        /// </summary>
        private static string jsDir = (ConfigurationManager.AppSettings["JsDir"] ?? "JsDir").ToString();

        /// <summary>
        /// css文件根目录
        /// </summary>
        private static string cssDir = (ConfigurationManager.AppSettings["CssDir"] ?? "CssDir").ToString();

        /// <summary>
        /// 文件版本号
        /// </summary>
        private static string fileVersion = (ConfigurationManager.AppSettings["FileVersion"] ?? "1.0.1").ToString();

        #region 链接外部CSS文件

        /// <summary>
        /// 链接外部CSS文件
        /// </summary>
        /// <param name="file">单个css文件相对路径，包括.css后缀但不包括css文件根目录</param>
        /// <returns></returns>
        public static string ToCss(this string file)
        {
            return string.Format("<link type=\"text/css\" rel=\"stylesheet\" href=\"/{0}/{1}?v={2}\" />", cssDir, file, fileVersion);
        }

        #endregion

        #region 链接外部JS文件

        /// <summary>
        /// 链接外部JS文件
        /// </summary>
        /// <param name="file">单个js文件相对路径，包括.js后缀但不包括js文件根目录</param>
        /// <returns></returns>
        public static string ToJs(this string file)
        {
            return string.Format("<script type=\"text/javascript\" src=\"/{0}/{1}?v={2}\"></script>", jsDir, file, fileVersion);
        }

        #endregion

在页面中，我们可以这样子用：

@Html.Raw("comm.css".ToCss())
@Html.Raw("jquery-3.0.0.min.js".ToJs())

是否调用ToCss()或者ToJs(),大家需要根据实际见仁见智哈哈。