前端性能优化 - 静态资源合并与压缩减少HTTP请求

简介: 这是一个基于.Net Core开发的,实现压缩Css、Javascript、Html资源的压缩、合并功能的组件。通过这个组件我们就可以实现静态资源的捆绑,实现对js、css、less、scss等静态资源的自动打包捆绑处理。

对于前端性能优化方法有很多,包括:图片合并、使用缓存、使用CDN、减少重定向、减少请求、压缩等等。今天就针对减少请求、资源压缩,给大家推荐一个基于.Net开发的资源合并与压缩的开源项目。

在介绍这个项目之前,先问大家一个问题,大家知道一个浏览器同域名请求的最大并发数限制是多少吗?

在早期的浏览器有的是2个、有的是4个,现在市面主流的浏览器一般限制数量是6个,手机一般是4个。虽然每个浏览器限制数量不一样,但我们知道的是,当一个页面同时发起过多的请求,肯定会导致部分请求在等待的

所以,我们压缩和合并静态资源请求数量,对于我们优化性能肯定有好处的。

项目简介

这是一个基于.Net Core开发的,实现压缩Css、Javascript、Html资源的压缩、合并功能的组件。通过这个组件我们就可以实现静态资源的捆绑,实现对js、css、less、scss等静态资源的自动打包捆绑处理。

通过将多个文件合并成了一个文件,减少浏览器的请求从而实现提升网站的访问性能的需求。

特点:

1、Js压缩:进行去掉空格,换行,注释等,格式紧凑,内部方法匿名化,节约存储空间。

2、Css压缩:去掉空格,换行,注释等,格式紧凑,节约存储空间。

3、Html压缩:压缩效果可以实现5-10%的压缩,删除助手、折叠空白、删除可选标记(p、li…)、删除引用的属性、删除特定属性、解码HTML实体、压缩内联样式和脚本;支持Html5。

技术架构

1、平台:基于.Net Core 4.5、Netstandard2.0开发

2、开发工具:Visual Studio 2017

项目结构

图片

使用方法

Js文件压缩

var result = Uglify.Js("var x = 5; var y = 6;");
Console.WriteLine(result.Code);   
// prints: var x=5,y=6

Css文件压缩

var result = Uglify.Css("div { color: #FFF; }");
Console.WriteLine(result.Code);   
// prints: div{color:#fff}

Html文件压缩

var result = Uglify.Html("<div>  <p>This is <em>   a text    </em></p>   </div>");
Console.WriteLine(result.Code);   
//prints: <div><p>This is <em>a text</em></div>

文本解析Html

var result = Uglify.HtmlToText("<div>  <p>This is <em>   a text    </em></p>   </div>");
Console.WriteLine(result.Code);   
// prints: This is a text

Js、Css文件合并请求示例

app.UseBundling(bundles =>
{
    bundles.LoadFromConfigFile("/bundleconfig.json", _env.ContentRootFileProvider); // 如果你需要对Bundle Minifier的配置也进行处理
    bundles.AddCss("/main.css") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
        .Include("/Content/bootstrap.min.css")
        .Include("/fonts/icomoon.min.css")
        .Include("/Content/jquery.paging.css")
        .Include("/Content/common/reset.css")
        .Include("/Content/common/loading.css")
        .Include("/Content/common/style.css")
        .Include("/Content/common/articlestyle.css")
        .Include("/Content/common/leaderboard.css")
        .Include("/Content/microtip.min.css")
        .Include("/Assets/breadcrumb/style.css")
        .Include("/Assets/nav/css/style.css")
        .Include("/Assets/tippy/tippy.css");

    bundles.AddJs("/main.js") // 告诉中间件需要将以下的文件最终打包成一个虚拟文件名
          .Include("/Scripts/bootstrap.min.js")
        .Include("/Scripts/bootstrap-suggest.min.js")
        .Include("/Scripts/jquery.query.js")
        .Include("/Scripts/jquery.paging.js")
        .Include("/Scripts/ripplet.js")
        .Include("/Scripts/global/scripts.js")
        .Include("/Assets/tippy/tippy.js")
        .Include("/Assets/newsbox/jquery.bootstrap.newsbox.js")
        .Include("/Assets/tagcloud/js/tagcloud.js")
        .Include("/Assets/scrolltop/js/scrolltop.js")
        .Include("/Assets/nav/js/main.js");
});

最后,对于提升网站性能虽然非常重要,但合并文件如果太大,也是会影响性能的。另外采用合并中间件,对于开发的时候需要编写额外的代码、相对于原生的写法比较不直观,所以在优化性能的同时,我们也要找到一个平衡点,而不是一味的追求性能优化。

项目地址: https://github.com/trullock/NUglify

- End -

专注分享编程知识、热门有用有趣的开源项目

相关文章
|
3天前
|
缓存 前端开发 JavaScript
优化前端性能:实用技巧与策略
本文介绍了前端性能优化的重要性和多种实用技巧,包括减少HTTP请求、利用浏览器缓存、压缩资源文件、异步加载非关键资源、优化CSS和JavaScript、减少DOM操作、谨慎使用Web字体、优化第三方脚本、使用服务工作者及性能监测和分析,帮助提升网站性能和用户体验。
|
2天前
|
缓存 前端开发 JavaScript
前端性能优化:实用技巧与策略
本文介绍了前端性能优化的关键技巧与策略,涵盖减少HTTP请求、利用浏览器缓存、压缩资源文件、异步加载非关键资源、优化CSS和JavaScript、减少DOM操作、谨慎使用Web字体、优化第三方脚本、使用服务工作者以及性能监测和分析等方面,帮助提升用户体验和搜索引擎优化效果。
|
18天前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
随着互联网技术的发展,用户对网页加载速度和交互体验的要求日益提高,前端性能优化成为提升用户体验和网站竞争力的关键。本文探讨了前端性能优化的重要性和七大关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS和JavaScript执行及第三方脚本优化,并提供了实践案例,帮助开发者构建更快、更高效的网站。
|
3天前
|
存储 缓存 监控
HTTP:强缓存优化实践
HTTP强缓存是提升网站性能的关键技术之一。通过精心设计缓存策略,不仅可以显著减少网络延迟,还能降低服务器负载,提升用户体验。实施上述最佳实践,结合持续的监控与调整,能够确保缓存机制高效且稳定地服务于网站性能优化目标。
10 3
|
12天前
|
前端开发
前端diff文件对比使用worker进行优化
如何使用Web Worker在React项目中优化文件对比差异功能的实现。
31 5
|
16天前
|
缓存 前端开发 JavaScript
|
8天前
|
缓存 前端开发 JavaScript
优化前端性能:关键策略与实践
在现代web开发中,前端性能优化至关重要。本文探讨了提升用户体验、转化率及降低服务器负载的关键策略,包括压缩资源文件、利用浏览器缓存、减少HTTP请求、异步加载、使用CDN、优化CSS/JavaScript执行、优化第三方脚本等,并介绍了Webpack/Rollup模块打包、HTTP/2特性、性能预算及Lighthouse/WebPageTest测试工具的应用。通过这些方法,可显著提高网站性能。
|
2月前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
35 1
|
1月前
|
前端开发 JavaScript API
前端性能优化-控制并发
【9月更文挑战第7天】前端性能优化-控制并发
21 0
|
2月前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
34 0