分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

第十一节:Bundles压缩合并js和css及原理分析

发布时间:2023-09-06 01:29责任编辑:熊小新关键词:js

一. 简介

 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方式的引入)

三. 代码测试

第十一节:Bundles压缩合并js和css及原理分析

原文地址:http://www.cnblogs.com/yaopengfei/p/7999488.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved