可以通过setup函数配置connect-cacheify。setup函数有两个参数,asset与options。asset是一种产品资源文件与开发资源文件的对应关系。每一个产品资源文件关联于一系列单独的开发资源文件。
options有以下设置参数:
• prefix——加于hash码之前的前缀字符串。(默认为空)
• production——由开发资源还是产品资源输出。(默认为true)
• root——访问静态资源的根路径,这个与之前中间件的路径一致。(默认为'.',当前路径)
connect-cachify实例
首先,让我们为connect-cachify准备一个简单的HTML文件。文件引入了3个CSS文件和3个Javascript文件。
<head>
<title>Dashboard: Hamsters of North America</title>
<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<link rel="stylesheet" type="text/css" href="/css/dashboard.css" />
</head>
<body>
...
<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/magick.js"></script>
<script type="text/javascript" src="/js/laughter.js"></script>
</body>
...
中间件的设置
其次,把 connect-cachify 库引入到你的 NodeJS 服务器中。建立你自己的 production 的开发资源映射并配置好中间件。
// Include connect-cachify
const cachify = require('connect-cachify');
// Create a map of production to development resources
var assets = {
"/js/main.min.js": [
'/js/lib/jquery.js',
'/js/magick.js',
'/js/laughter.js'
],
"/css/dashboard.min.css": [
'/css/reset.css',
'/css/common.css',
'/css/dashboard.css'
]
};
// Hook up the connect-cachify middleware
app.use(cachify.setup(assets, {
root: __dirname,
production: your_config['use_minified_assets'],
}));
...
为了保持代码清爽,asset 映射可以放到一个文件中,这样既可成为 connect-cachify 的配置,也是你的程序的配置。
更新你的模板来使用cachify
最后,必须更新你的模板以指出使用到的 Javascript 和 CSS 在哪里。JavaScript 用 “cachify_js” 来指明,而 CSS 用 “cachify_css” 指明。
<head>
<title>Dashboard: Hamsters of North America</title>
<%- cachify_css('/css/dashboard.min.css') %>
</head>
<body>
...
<%- cachify_js('/js/main.min.js') %>
</body>
...
Connect-cahified输出
如果将参数production设置为false,connect-cachify将输出三个link标签与三个script标签,与原来的输出一样。如果将production设置为true,将只输出各一个标签。各标签的url将被加上MD5 hash码前缀。而MD5 hash码前缀用于防止缓存。hash码将会随着产品资源文件内容发生变化,以清除缓存机制副作用。
<title>Dashboard: Hamsters of North America</title>
<link rel="stylesheet" type="text/css" href="/v/2abdd020a6/css/dashboard.min.css" />
</head>
<body>
...
<script type="text/javascript" src="/v/acdd2ab372/js/main.min.js"></script>
</body>
...
以上便是connect-cachify的所有设置。
结论
有许多简单的方法来加快网站速度。利用3C技术-合并(concatenation)、压缩(compression)与缓存(caching)-将大大提高网站的下载速率与改善用户的使用体验。Connect-cachify通过合并与缓存显著改善NodeJS应用,但我们应该可以做的更好。