静态资源管理思路

来源：互联网发布：c语言将字符转换为数字编辑：程序博客网时间：2024/06/05 10:18

参考：如何高效地管理网站静态资源 http://fex.baidu.com/blog/2014/04/fis-static-resource-management/

减少频繁维护JS&CSS样式的操作

扫描静态资源，建立一张静态资源关系表，记录每个静态资源的部署路径以及依赖关系等信息

###在html中声明依赖
在项目的 index.html 里使用注释声明依赖关系：

<!--    @require demo.js    @require "demo.css"-->

{    "res" : {        "demo.css" : {            "uri" : "/static/css/demo_7defa41.css",            "type" : "css"        },        "demo.js" : {            "uri" : "/static/js/demo_33c5143.js",            "type" : "js",            "deps" : [ "demo.css" ]        },        "index.html" : {            "uri" : "/index.html",            "type" : "html",            "deps" : [ "demo.js", "demo.css" ]        }    },    "pkg" : {}}

###在js中声明依赖

支持识别 js 文件中的 require 函数，或者注释中的 @require 字段标记的依赖关系，这些分析处理对 html 的 script 标签内容同样有效。

//demo.js/** * @require demo.css * @require list.js */var $ = require('jquery');

{    "res" : {        ...        "demo.js" : {            "uri" : "/static/js/demo_33c5143.js",            "type" : "js",            "deps" : [ "demo.css", "list.js", "jquery" ]        },        ...    },    "pkg" : {}}

###在css中声明依赖

支持识别 css 文件注释中的 @require 字段标记的依赖关系，这些分析处理对 html 的 style 标签内容同样有效。

//demo.js/** * @require demo.css * @require list.js */var $ = require('jquery');

{    "res" : {        ...        "demo.js" : {            "uri" : "/static/js/demo_33c5143.js",            "type" : "js",            "deps" : [ "demo.css", "list.js", "jquery" ]        },        ...    },    "pkg" : {}}

0 0