高访问量页面优化实战 require.js+cache

最新推荐文章于 2025-06-15 14:30:25 发布

原创最新推荐文章于 2025-06-15 14:30:25 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

java 同时被 3 个专栏收录

36 篇文章

订阅专栏

javascript

12 篇文章

订阅专栏

web前台技术

12 篇文章

订阅专栏

本文分享了一次针对高流量页面的优化经验，重点介绍了使用Require.js实现JS模块化加载、压缩合并及缓存策略等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先介绍一下使用场景:

最近给公司一个访问量很大的页面做优化，页面如下图

拿到这个页面后就先来分析分析这个页面的问题

1，首先这个页面是jsp的，全部是服务器端生成的页面，在访问量很大的情况下也没法使用缓存加速，因为数据都耦合在一起，有标的的信息，有标的的状态，有与用户相关的红包的信息

2，页面中引入了非常多的 js ，还有像jquery这样的大个头的文件，严重影响网页加载速度，并且是通过一个装饰器自动加上的，如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title><decorator:title /></title>
<script type="text/javascript">
var ctx="${ctx}";var res="${res}";var  currentUrl = "${currentUrl}";var currentTime = "${currentTime}";var clientIp = "${clientIp}";var domainurl="${domainurl}";
</script>
<script type="text/javascript" src="${res}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${res}/js/public.js"></script>
<script type="text/javascript" src="${res}/js/dialog.js"></script>
<script type="text/javascript" src="${res}/js/commom/commom.js"></script>
<script type="text/javascript" src="${res}/js/commom/base.js"></script>
<script type="text/javascript" src="${res}/static/public/js/util.js"></script>
<decorator:head />
</head>
<body>
<%-- loading  start--%>
<div id="loading" style="display:none;background-color: rgba(0,0,0,0.5);position: absolute;z-index: 2;top: 0px;opacity: 0.5;bottom: 0;left: 0;right: 0;">
<div style="position:absolute;top: 35%;left:50%;">
	<div class="loading-icon" style="position: absolute;opacity: 1;"></div>
</div>
</div>
<%-- loading  end--%>
<div id="tit_tip" class="tit_tip" style=""></div>
<div id="wrap">

<decorator:body />
</div>
<script type="text/javascript" src="${res_data}/js/ssjp2p/data.js"></script>

</body>
</html>

这个家伙会把页面本身装载自己里面，加上很多通用的js css等，导致很多没必要的东西都引进来了。

好了我的优化之路就要开启了。

基本step 如下

1，去掉装饰器，去掉多余加载的文件

2，页面js 使用require.js 达到模块化加载

3，使用r.js 对js 进行压缩合并,减少加载数量和体积

4，页面中标的状态和红包信息使用异步加载，方便缓存

5，缓存页面，加速gogogo

解释: 之所以没有采取全部数据异步加载，而仅对标的状态和红包信息剥离是因为这个页面写的实在是太乱了，里面逻辑太多了，小弟实在干不动了。

----------------------------------下面进入require.js 的部分-----------------------------------------------

要使用require.js 当然得将js 按照AMD 规范写喽, 或者使用shim ,将全部方法挂在一个全绝变量下,这里就不详述了。

提示：下面的js 都是我已经全部改造成AMD 规范的js

先来看一下我给require.js设计的目录结构

requireModule 下面都是require.js涉及到的区域

三个目录解释一下

\builder 下面是和配置、压缩合并等相关的东西

\optimize 下面是压缩过的js 目录

\orign 下面是原始的 js文件

然后 \optimize 和 \orign 下面都有一个\page,这就是每个页面的js 入口文件

也就是说,每个页面都有一个自己的入口js文件 , 不是说不可以多个,而是方便压缩,尽可能的减少加载的数量和体积

页面上是这样写的:

	<script src="${res}/static/site/v1/js/requireModule/builder/requireConfig.js"></script>
	<!-- 根据环境加载不同的js -->
	<c:if test="${env=='dev'}">
		<script src= "${res}/static/site/v1/js/requireModule/orign/requireOrign.js"  data-main="page\p2pdetail"></script>
	</c:if>
	<c:if test="${env=='test'||env=='run'||env=='uat'}">
		<script src= "${res}/static/site/v1/js/requireModule/optimize/requireOptimize.js"  data-main="page\p2pdetail"></script>
	</c:if>

这里根据环境进行了选择, 本地开发使用原生 js ,测试和生产使用压缩合并后的js.

先加载requireConfig.js 来配置require.js

<script src="${res}/static/site/v1/js/requireModule/builder/requireConfig.js"></script>

requireConfig.js 如下

var require=
{
	
    shim:{
    	"zepto":{deps: [],exports:'$'},
    	"circles":{deps: ["zepto"],exports:"Circles"},
    	"Market":{deps:["zepto"],exports:"Market"},
    },
    map: { 
    	'*': {'css': 'css.min' }
    },
    paths: {
    	'Market':"base",
    	"zepto":"zepto-1.1.6.min",
    	"circles":"circles.min",
    	"calculator":"profit-calculator",
    	"countDown":"p2p_countdown",
    	"data_require":"https://marketres.feidee.com/finance-datares/js/ssjp2p/data_require",
    	"data_require_test":"https://lctest2.feidee.net/finance-datares/js/ssjp2p/data_require"
    },
    waitSeconds:30
}

require 的具体配置我就不讲解了,网上有很多教程了,这里不赘述了。

提示：那个 map中配置了一个 require 的css插件，这样就可以让css也模块化加载了

<script src= "${res}/static/site/v1/js/requireModule/orign/requireOrign.js"  data-main="page\p2pdetail"></script>

<script src= "${res}/static/site/v1/js/requireModule/optimize/requireOptimize.js"  data-main="page\p2pdetail"></script>

上面这两个都是require.js ,只是在末尾我加了下面这段

requirejs.config({
    baseUrl: res+'/static/site/v1/js/requireModule/orign',
})

和这段

requirejs.config({
    baseUrl: res+'/static/site/v1/js/requireModule/optimize',
})

也就是说根据具体环境,比如开发使用requireOrign.js 加载 /static/site/v1/js/requireModule/orign 目录下的未加密的js

而测试和生产环境使用requireOptimize.js 加载 /static/site/v1/js/requireModule/optimize 目录下的经过加密合并的js

然后 data-main 加载本页面的入口js文件这里注意使用反斜杠！

问题：为什么要将baseUrl 和前面的配置分离出来呢？

答案：因为在不同的环境 baseUrl 是不同的，再加上后面的压缩合并也需要 require 的配置信息，所以 require的配置信息就会有很多套，维护起来就非常麻烦，所以把公用的配置全部放在 requireConfig.js这个文件里,就非常合理了.

下面来看如何进行压缩合并

/builder 目录下除了 requireConfig.js

还有r.js ,它是require.js 提供的工具用来压缩合并的,它需要node.js 环境,很容易安装,这里就不介绍了

还有 build.js

({
    baseUrl: "../orign",
    dir: "../optimize",
    optimize: "uglify",
    optimizeCss: "standard.keepLines",
    mainConfigFile:["requireConfig.js","requireConfigOverride.js"],
    removeCombined: true,
    modules: [
        {
            name: "page/p2pdetail",
            exclude:["zepto"]
        }
    ]
})

build.js 如上， r.js 要使用这个文件配置打包压缩的策略

当然你也可以将 requireConfig.js 的内容配在这里, 但我这里直接使用 mainConfigFile 这个参数指向了前面的 requireConfig.js 文件

这样在压缩合并的过程中会读取requireConfig.js 的依赖关系。

另外要注意的是,这个文件列表可以是多个,后面配置的参数会覆盖前面配置的参数

modules 里面配置了需要压缩合并的文件,我们这里加上 \page目录下的js 即可,exclude 可以配置不需要合并的js

配置好这个build.js 后就可以执行命令了

打开 cmd 到build.js 的目录执行