express－21 静态内容

静态内容是指应用程序不会基于每个请求而去改变的资源。

• 多媒体: 图片、视频和音频文件

• CSS:

• JavaScript

• 二进制下载文件: 这包含所有种类：PDF、压缩文件、安装文件等类似的东西。

• 借助一些JavaScript，浏览器可以使用未经编译的LESS。这种方式会影响性能，所以不推荐使用。

• 注意，如果只是要搭建API，可能没有静态内容。

性能方面的考虑

• 减少请求次数:

  • 合并资源:
    • 尽可能多地将小图片合并到一个子画面中。然后用CSS设定偏移量和尺寸只显示图片中需要展示的部分; 推荐用SpritePad的免费服务创建子画面
  • 浏览器缓存

• 缩减内容的大小。

在使用CDN时一般不用担心CORS。在HTML中加载外部资源不违反CORS原则：只有用AJAX加载的资源才必须启用CORS

面向未来的网站

• CDN是专为提供静态资源而优化的服务器，它利用特殊的头信息启用浏览器缓存。
• 另外CDN还能基于地理位置进行优化

静态映射

// 设置handlebars视图引擎
var handlebars = require('express3-handlebars').create({
  defaultLayout:'main',
  helpers: {
    static: function(name) {
      return require('./lib/static.js').map(name);
    } 
  }
});

<header><img src="{{static '/img/logo.jpg'}}" alt="Meadowlark Travel Logo"></header>

• 接下来会花些时间把视图和模板中所有对静态资源的引用都改过来。现在HTML中的所有静态资源都可以挪到CDN上去了。

CSS中的静态资源