技术开发 频道

前端优化利器 Connect-Cachify使用指南

  可以通过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码将会随着产品资源文件内容发生变化,以清除缓存机制副作用。

<head>
  
<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应用,但我们应该可以做的更好。

0
相关文章