zoukankan      html  css  js  c++  java
  • 第十一节:Bundles压缩合并js和css及原理分析

    一. 简介

     1.背景:浏览器默认一次性请求的网络数是有上限的,如果你得js和css文件太多,就会导致浏览器需要多次加载,影响页面的加载速度, MVC中提供Bundles的方式压缩合并js和css,是MVC中特有的一种优化方式

     (当然现在前端也有很多基于node的工作流插件,可以合并压缩混淆js或css)

    2. 原理(了解即可):核心方法ApplyTransforms,通过StreamReader不断一次一次进行读取

      参考文档:https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

    二. 如何使用

     ①:首先要在Global中进行注册,代码:BundleConfig.RegisterBundles(BundleTable.Bundles); 【系统默认已经注册,此步骤不需要我们操作】

     ②:在BundleConfig类中进行自定义合并压缩js或css

       a. 压缩css方法:bundles.Add(new StyleBundle("~/XXX").Include("","",""));

        StyleBundle中的参数为一个虚拟路径,单必须以【~/】开头,后面自定义,该名称即为在前端页面引入的名称。

        Include中的参数为一个可变的string数组,用来声明要压缩合并的css文件的路径。

       b. 压缩js方法:bundles.Add(new ScriptBundle("~/XXX").Include("","",""));

        ScriptBundle中的参数为一个虚拟路径,单必须以【~/】开头,后面自定义,该名称即为在前端页面引入的名称

        Include中的参数为一个可变的string数组,用来声明要压缩合并的css文件的路径。

    ③:在前端页面通过Render方法或者原生方法引入合并后的js或css的虚拟目录

    ④:将webconfig中的调试模式设置为false,这样在不发布的情况下就可以看到压缩后的效果。

        <compilation debug="false" targetFramework="4.5" />

      如果设置为true,直接在vs中运行,是看不到压缩效果的,仍然是多个js或css文件 (适用于通过Render方式的引入)

    ⑤:该步骤和④的效果相同.

      如果不设置④的情况下,还想在vs中运行看到压缩效果,也可以在BundleConfig中加一句话:

      BundleTable.EnableOptimizations = true; (特别注意:这里是true,而配置文件的方式是设置为false)

      (适用于通过Render方式的引入)

    补充:通过表达式扩展:(详细语法可以参考上面的地址,下面扩展几个常用的)

    ①: T* 该目录下以T开头的js或css文件

    ②: *.js *.css 该目录下的所有js或css文件

    ③: T*.js T*.css 这个是不合法,违规的

    三. 代码测试

     1. 新建两个js文件和css文件

    2. 在BundleConfig文件中进行注册

     

    3. 编写前端页面,以传统的方式引入,并查看效果。

     

    4. 引入压缩合并后的路径。

     

    方式一的运行结果:

     

    方式二的运行结果:发现并没有压缩

     

     至于为什么,上面已经解释了。 

     解决方案:

      方案①:BundleTable.EnableOptimizations = true;

      方案②:<compilation debug="false" targetFramework="4.5" />

     重新运行:

     

    最后补充几个含格式验证的压缩:

     

  • 相关阅读:
    Hadoop集群VSFTP和SecureCRT安装配置
    Hadoop集群完全分布式坏境搭建
    Hadoop集群坏境搭建配置
    Hadoop集群坏境CentOS安装
    Pr视频剪辑基础技巧学习
    SAN和NAS之间的基本区别
    原始容量、可用容量和有效容量的区别
    解释一下什么是网盘与云盘
    纠错技术之FEC(向前纠错)
    分布式存储的冗余类型(N+2:1)
  • 原文地址:https://www.cnblogs.com/yaopengfei/p/7999488.html
Copyright © 2011-2022 走看看