Skip to content

Latest commit

 

History

History
137 lines (98 loc) · 5.99 KB

README.md

File metadata and controls

137 lines (98 loc) · 5.99 KB
Raw

静态资源缓存控制编译工具

前不久在 知乎 上回答了一个问题：大公司里怎样开发和部署前端代码？。其中讲到了大公司在前端静态资源部署上的一些要求：

  1. 配置超长时间的本地缓存 —— 节省带宽，提高性能
  2. 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
  3. 静态资源CDN部署 —— 优化网络请求
  4. 更资源发布路径实现非覆盖式发布 —— 平滑升级

其中比较复杂的部分就是 以文件的摘要信息为依据，控制缓存更新与非覆盖式发布 这个细节。因此基于 fis 包装了一个简单的命令行工具，并设立此项目，用于演示这部分功能。

这个工具基于 fis 的小工具是完全可以用作工程中的，有任何问题可以在 这里 留言。

请跟着下面的步骤来使用这个命令行小工具：

第一步：安装工具

这个命令行小工具依赖 nodejs 环境，因此，请先确保本地安装了它。

使用 nodejs 随带的 npm 包管理工具进行安装：

npm install -g rsd

第二步：创建项目

在 命令行 下clone本仓库，或者自己创建一个新的项目，并进入：

mkdir rsd-project  # 项目名任意
cd rsd-project

在项目根目录下创建一个空的 fis-conf.js 文件，这是工具配置，什么都不用写，空着就行。

然后开始在项目目录下，随意创建或添加 页面、脚本、样式、图片、字体、音频、视频等等前端资源文件，正常写前端代码吧！

第三步：发布代码

在项目根目录下执行：

rsd release --md5 --dest ../output

然后去到 ../output 目录下去查看一下产出结果吧，所有静态资源都以md5摘要形式发布了出来，所有资源链接，我说 所有链接，包括html中的图片、样式、脚本以及js中的资源地址、css中的资源地址全部都加上了md5戳。

上述命令中，--md5 就是表示要给所有资源定位标记加上摘要信息的意思，不加这个参数就没有摘要信息处理。--dest ../output 表示把代码发布到当前目录上一级的output目录中。整个这条命令还可以简写成：

rsd release -m -d ../output

或者进一步连写成：

rsd release -md ../output

在本地服务器中浏览发布代码

你本地安装了诸如 Apache、Nginx、Lighttpd、IIS等服务器么？如果安装了，假设你的服务器 根目录 在 d:\wwwroot，你可以利用rsd工具的release命令，把代码发布过去，比如：

rsd release -md d:\wwwroot

这样就把代码发布到了本地服务器根目录下，然后就可以在浏览器中查看效果了！

如果你本地没有安装任何服务器，你可以使用rsd内置的调试服务器，执行命令：

rsd server start

接下来我们同样要把代码发布到这个内置服务器中，release命令如果省略 --dest <path>参数，就表示把代码发布到内置服务器的根目录下：

rsd release -m

在浏览器中访问： http://localhost:8080 即可












一些小技巧

  1. rsd集成了对很多前端编程语言的支持，包括：

  2. 内置了压缩器，在release的时候追加 -o 或者 --optimize 参数即可开启，压缩器包括：

  3. 还可以给资源加CDN域名，在release的时候追加 -D 或者 --domains 参数即可，域名配置写在fis-conf.js里：

    // fis-conf.js
fis.config.set('roadmap.domain', [ 'http://localhost:8080' ]);

  4. 所有常规代码中的资源定位接口都会经过工具处理，包括：

    • 类CSS文件中：
      • 背景图url
      • font-face字体url
      • ie特有的滤镜属性中的src
    • 类JS文件中：
      • 提供了一个叫 __uri('path/to/file') 的编译函数用于定位资源
    • 类HTML文件中：
      • link标签的href属性
      • script, img, video, audio, object 等标签的src属性
      • script标签中js代码里的资源定位标记
      • style标签中css代码里的资源定位标记

  5. 所有资源文件可以任意相互引用，工具会处理资源定位标记，使之服从知乎回答中提到的优化策略。

  6. 还提供了资源内嵌的编译接口，用于把一个资源的内容以文本、字符串或者base64的形式嵌入到 任意 一个文本文件中。

  7. 为了不用每次保存代码就执行一下release命令，工具中提供了文件监听和浏览器自动刷新功能，只要在release的时候在追加上 -w 和 -L 两个参数即可（注意L的大小写），比如：

    rsd release -omwL  #压缩、加md5戳、文件监听、浏览器自动刷新

关于这个小工具

它的原码在 这里。是的，就这么一点点代码，花了大概半小时写完的，因为一切都在 fis 中集成好了，我只是追加几个语言编译插件而已。