Liferay 前端性能调优(4) 打包artifact时候启用yui-compressor

简介:

上一章节我们介绍了,从浏览器向服务器获取资源时候,可以通过Gzip让浏览器拿到的是压缩的资源从而减少网络下载时间,那么我们能否从源头上考虑呢,就是我们从源头(资源本身)让资源尽可能的小。


办法当然是有的,一般资源有css,js,image,我们的思路是,对于css,js,我们用yui-compressor来对其进行压缩,对于image,我们将他们sprite成单个的大图从而减少网络请求次数。


yui-compressor,相信很多人都不陌生,它可以专门来压缩css,js,一般会去除其中的注释,空白行,合并语义相近的行等等,这里就不在赘述了。我们因为构建分发包使用的都是maven,所以我们就用maven的yui-compressor插件来完成这个任务。


具体配置如下

只要在我们的pom文件的<plugins>中加一个<plugin>如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
...
< plugin >
                                     < groupId >net.alchim31.maven</ groupId >
< artifactId >yuicompressor-maven-plugin</ artifactId >
< version >${yui-compress-version}</ version >
  < executions >
     < execution >                                                < phase >prepare-package</ phase >
       < goals >                                                   < goal >compress</ goal >
       </ goals >
                                                 < configuration >
                                                         < nosuffix >true</ nosuffix >
                                                         < jswarn >false</ jswarn >
                                                 </ configuration >
         </ execution >
    </ executions >
         </ plugin >
  < plugin >
                                 < groupId >org.apache.maven.plugins</ groupId >
< artifactId >maven-war-plugin</ artifactId >
                                 < version >${plugin.war.version}</ version >
       < configuration >
                                         < warSourceExcludes >js/**, css/**</ warSourceExcludes >
       </ configuration >
   </ plugin >
</ plugins >


然后我们运行的时候,就会自动看到在编译,单元测试完会执行压缩,最后在打包,因为我们这个yuicompressor-maven-plugin 定义在maven-war-plugin 之前的:

134645653.png

从这里我们可以显著的看出来,大多数js资源文件都有不同程度的压缩。



测试:

那么到真实服务器上去访问这些资源是否还这样呢?我们做个比较:


在压缩前:

134823947.png


在压缩后:

134838275.png


显然,所有请求的资源文件都变小了,速度也提高了。






本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1213128,如需转载请自行联系原作者
目录
相关文章
|
4月前
|
Rust 前端开发 JavaScript
第4期 一文了解前端打包工具的发展
第4期 一文了解前端打包工具的发展
76 0
|
9天前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
36 13
|
3天前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
31 3
|
26天前
|
前端开发 Java C++
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
使用Vite和Vue3构建支持共享组件和分模块独立打包的前端项目的方法。
66 0
超简单使用Vite+Vue3构建共享开发和分模块打包的前端项目
|
2月前
|
缓存 前端开发
前端优化之路:构建、打包速度提升
如果一个项目构建、热更新、打包速度过慢,中途需大把时间去等待,那么不免让人抓狂。
|
2月前
|
缓存 前端开发 JavaScript
前端优化之路:打包文件拆包、增加哈希值
前面对项目打包做了优化处理,但是还不够完美,有两点可继续优化。
|
26天前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
30 0
|
2月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
3月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
52 3
|
2月前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
下一篇
DDNS