我在SitePoint上多次提到,如何获得良好的性能是当今的主要关注点,以及您应该如何争取快速的网页。 在我的一些有关JavaScript API的文章中,例如“资源定时API简介”和“ 发现用户定时API” ,我为您提供了了解使项目变慢的所有功能。 今年早些时候,克雷格·巴克勒(Craig Buckler)也在其文章《减少页面重量的完整指南》中介绍了该主题。
如果您不被限制在过去,则可能会使用Grunt或Gulp之类的任务运行器,通过自动化许多我们以前手动执行的操作来改善工作流程。 在本文中,我将介绍五个Grunt任务,这些任务可以帮助我们提高网页的性能。
grunt-contrib-imagemin
我要提到的第一个任务是grunt-contrib-imagemin 。 我想首先讨论它的原因是图像正在破坏网络。 认真!
如果查看HTTParchive.org统计信息,您会发现图像占页面总大小的63%以上。 出现这种膨胀的原因是,通常不会将图像压缩为具有尽可能低的权重。 grunt-contrib-imagemin是您可以用来解决此问题的任务之一。
此任务随以下优化器一起提供,以便能够压缩Web上使用的大多数图像格式:
- Gifsicle压缩GIF图像
- jpegtran压缩JPEG图像
- optipng压缩PNG图像
- svgo压缩SVG图像
下面显示了此任务的配置示例:
imagemin: {
dist: {
options: {
optimizationLevel: 5
},
files: [{
expand: true,
cwd: 'src/images',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/'
}]
}
}
通过使用optimizationLevel
选项,此配置可以进行高水平的优化。 该值的范围是0到7,默认值为3。 在这种情况下,优化的图像是扩展名为png,jpg或gif的图像,它们位于“ src / images”文件夹及其所有子文件夹中。 优化的结果将存储在“ dist”文件夹中。
咕-作tri
grunt-contrib-uglify任务用于最小化JavaScript文件。 该任务将删除源代码中所有不必要的空格,并一致地重命名变量和函数,以使用尽可能短的名称。
您将经常用于此任务的一些选项是sourceMap
和banner
。 前者在与目标文件相同的目录中创建源映射文件。 要启用此选项,您必须将其设置为true
(默认值为false
)。 banner
是在最小化输出之前的字符串,通常在其中输入文件/库/框架的名称,版本,作者名称和许可证。 其默认值为空字符串。
为了让您了解缩小源的外观,假设您具有以下JavaScript代码:
var MyApplication = function() {
var data = 'hello';
this.sum = function(first, second) {
return first + second;
}
this.showData = function() {
return data;
}
};
缩小过程会将其转换为以下代码:
var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};
该工具的示例配置如下所示:
uglify: {
dist: {
options: {
sourceMap: true,
banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
},
files: {
'dest/output.min.js': ['src/input.js'],
}
}
}
grunt-contrib-cssmin
顾名思义, grunt-contrib-cssmin会压缩CSS文件。 像grunt-contrib-uglify任务一样,此任务提供了banner
选项。
此任务的简单配置是:
cssmin: {
dist: {
options: {
banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
},
files: {
'dist/css/style.min.css': ['src/css/**/*.css']
}
}
}
本示例将“ src / css”及其子文件夹中存储的所有CSS文件缩小,并将结果存储在名为“ style.min.css”的单个样式表中,该样式表放置在文件夹“ dist / css”中。 此外,该配置在缩小文件的顶部添加了横幅。
咕unt声
处理CSS的另一项任务是grunt-uncss 。 该任务从项目中删除了未使用的CSS,因此减小了最终CSS文件的大小,从而缩短了下载时间。 如果您正在使用Boostrap或Foundation这样的框架进行开发,则它特别适合。 该任务有一些重要的限制,您可以在官方文档中阅读。
值得一提的一些不错的选项是ignore
,它允许我们指定不应删除的选择器列表,而ignoreSheets
允许我们指定要忽略的样式表。
下面显示了此任务的示例用法:
uncss: {
dist: {
options: {
ignore: [/js-.+/, '.special-class'],
ignoreSheets: [/fonts.googleapis/],
},
files: {
'dist/css/unused-removed.css': ['src/index.html', 'src/contact.html', 'src/service.html']
}
}
}
grunt-contrib-htmlmin
我在本文中要讨论的最后一个Grunt任务是grunt-contrib-htmlmin ,这是一个最小化HTML代码的任务。 它不会大大加快您的网站的速度,因为它通常仅节省几Kb,而且如果您使用gzip压缩来提供内容,则收益会更低。 因此,如果您希望最小化HTML,那么……恭维。 这意味着您的网站已经非常优化。
但是,处理网络性能时要遵循的理念是每Kb都至关重要。 因此,让我们看一个将此任务集成到我们的工作流程中的简单配置:
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: [{
expand: true,
cwd: 'src',
src: '**/*.html',
dest: 'dist/'
}]
}
}
上面的代码处理放置在“ src”目录及其子文件夹中的所有页面。 对于这些页面中的每个页面,任务都会删除所有注释并折叠找到的空间,并将结果存储在“ dist”目录中。
结论
在本文中,我向您介绍了五个Grunt任务,可以轻松提高网站的性能。 它们是如此简单,以至于您没有任何借口避免使用它们,并通过更快的服务为用户提供更好的体验。 希望您喜欢本文,并尽快使用这些任务。
您曾经使用过它们吗? 他们在多大程度上改善了您的网站? 您有喜欢和想要与我们分享的任务吗?
From: https://www.sitepoint.com/5-grunt-tasks-improve-performance-website/