Minify小工具的运用----强力压缩CSS和JS文件,加快页面响应
twocode

    不管是前端设计还是后台开发,总是免不了要和CSS、JS代码打交道,他们不能算是立足之本,但也会是大师之路的垫脚石。因为做网站总是要有网页的,有网页就需要样式表的修饰和页面的小特效。

    这样一来问题就来了,随着样式修饰的增加,就需要将样式写在外部的CSS文件,这样可能就会是多个CSS文件;同样随着页面特效的增加,JS文件同样增加,然后去访问一个页面时,就需要加载各个CSS和JS文件,最直接的负面影响是增加了网页的响应时间.

    为了解决这问题,推荐使用Minify工具包,下面就去简单介绍一下Minify:

    它的目录结构如下

        blob.png    

    然后,起作用的就是其中的min文件夹:

        blob.png    现在你需要知道的就是,加min文件夹复制到你的项目目录下,可以与css和js同一级目录,然后在模板中使用时需要改变一下调用路径:

    不使用min压缩时的路径是:

        项目路径/pub/css/test.css

        项目路径/pub/js/test.js

    启用min的压缩时的路径为:

        #注意路径要严格一致,否则会报错的

        项目路径/pub/min?f=pub/css/test.css

        项目路径/pub/min?f=pub/js/test.js

    现在可以对比一下,min使用前后的效果了,个人的效果图如下,仅供参考,以个人当时实际情况为准!!    

blob.png

  上图是之前,下图是之后:

   对比上下图,注意Time:后面的单位,s变成了ms,直接就降了一个数量级;  


blob.png

网友评论已关闭