[{"data":1,"prerenderedAt":227},["ShallowReactive",2],{"tag-fis-1":3},{"title":4,"articles":5,"hot_article":16,"month_arch":75,"total":223,"cover":224},"fis - 独孤影的博客",[6],{"id":7,"title":8,"uri":8,"author":9,"tags":10,"created_at":13,"view_count":14,"content":15},21,"beego中使用fis","duguying",[11,12],"beego","fis","2014-12-03 10:47:56",9253,"\u003Cp>前段时间接触到了fis，后来发现它正是我所寻找的一类前端工具。之前在byvoid大神的博客上看到前端html源码中引用的js和css都是在文件名后面附加了随机串。如\u003Ccode>\u002Fcss\u002Fstyle-882e60051fc11fd2558e888585fc3950.css\u003C\u002Fcode>。我感觉这个做法应该有他的深意。接触fis后才知道，文件md5映射之后可以在服务器端开启静态文件永久缓存，如此一来可以最大化利用浏览器的缓存机制，起到加快页面加载速度节省流量的效果。由于md5映射的文件名是唯一的，所以不用担心缓存导致的前端问题。这一技术在许多其他的网站上也有用到，例如百度、twitter等，其中fis就是出自百度，据fis文档介绍，其中某些创意是受twitter启发的。\u003C\u002Fp>\u003Cp>最近一直在用beego做项目，于是打算将fis的md5映射机制迁移到beego上来，fis官网文档上介绍了fis在go web的实现demo，不过它是基于martini框架的，在多番查阅文档后，我觉得若是抛开模版内的资源文件自动打包这一功能单纯实现md5映射，我能够自己将其在beego上实现。\u003Cbr\u002F>\u003C\u002Fp>\u003Cp>fis中带md5映射的前端资源全部记录于map.json文件中，fis项目编译后会自动生成map.json文件，示例如下\u003C\u002Fp>\u003Cpre class=\"brush:js;toolbar:false\">{\n    "res": {\n        "js\u002Fglobal.js": {\n            "uri": "\u002Fstatic\u002Fjs\u002Fglobal_f39ad61.js",\n            "type": "js"\n        },\n        "js\u002Fuser.js": {\n            "uri": "\u002Fstatic\u002Fjs\u002Fuser_42dbc3b.js",\n            "type": "js"\n        },\n        "octicons\u002Focticons.scss": {\n            "uri": "\u002Fstatic\u002Focticons\u002Focticons_1b828d3.css",\n            "type": "css"\n        },\n        "sass\u002Findex.scss": {\n            "uri": "\u002Fstatic\u002Fcss\u002Findex_b855d1c.css",\n            "type": "css"\n        },\n        "sass\u002Flogin.scss": {\n            "uri": "\u002Fstatic\u002Fcss\u002Flogin_c8abcc0.css",\n            "type": "css"\n        },\n        "sass\u002Fregister.scss": {\n            "uri": "\u002Fstatic\u002Fcss\u002Fregister_b76a400.css",\n            "type": "css"\n        },\n        "sass\u002Fstyle.scss": {\n            "uri": "\u002Fstatic\u002Fcss\u002Fstyle_462f7a1.css",\n            "type": "css"\n        }\n    },\n    "pkg": {}\n}\u003C\u002Fpre>\u003Cp>这其中"res"项就是资源映射表，"js\u002Fglobal.js"以及"js\u002Fglobal.js"等是编译前的文件，即fis项目源文件，而"\u002Fstatic\u002Fjs\u002Fglobal_f39ad61.js"以及"\u002Fstatic\u002Focticons\u002Focticons_1b828d3.css"等是编译后的文件，网站应当加载编译后的文件，而编译后的文件名是变动的，每次修改源文件并编译后，编译后的文件名md5值便会变化，不过编译前的文件名是不变的，因此，思路是通过编译前文件名得到对应的编译后的文件名，然后加载到网页。beego实现如下：\u003C\u002Fp>\u003Cp>在工具包utils里有\u003Cbr\u002F>\u003C\u002Fp>\u003Cpre class=\"brush:go;toolbar:false\">package utils\n\nimport (\n\t"fmt"\n\t"github.com\u002Fastaxie\u002Fbeego"\n\t"github.com\u002Fgogather\u002Fcom"\n\t"html\u002Ftemplate"\n)\n\n\u002F\u002F fis map\nfunc Fis(key string) template.HTML {\n\tvar text string\n\tcontent := loadMap()\n\tjson, _ := com.JsonDecode(content)\n\tjson = json.(map[string]interface{})["res"]\n\tif fileMap, ok := json.(map[string]interface{}); !ok {\n\t\tfmt.Println("map.json id illeage!")\n\t} else {\n\t\tfor tmpKey, views := range fileMap {\n\t\t\turi, ok := views.(map[string]interface{})["uri"].(string)\n\t\t\tif !ok {\n\t\t\t\tfmt.Println("error in map.json")\n\t\t\t}\n\n\t\t\tfileType, ok := views.(map[string]interface{})["type"].(string)\n\t\t\tif !ok {\n\t\t\t\tfmt.Println("error in map.json")\n\t\t\t}\n\n\t\t\tif tmpKey == key {\n\t\t\t\tif fileType == "css" {\n\t\t\t\t\ttext = `<link rel="stylesheet" href="` + uri + `">`\n\t\t\t\t} else if fileType == "js" {\n\t\t\t\t\ttext = `<script src="` + uri + `"><\u002Fscript>`\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn template.HTML(text)\n}\n\n\u002F\u002F load map.json\nfunc loadMap() string {\n\tmapPath := beego.AppConfig.String("static_map")\n\tmapContent := com.ReadFile(mapPath)\n\treturn mapContent\n}\u003C\u002Fpre>\u003Cp>其中Fis函数便是由编译前的文件名查找编译后的文件名。接下来是注册模版函数\u003Cbr\u002F>\u003C\u002Fp>\u003Cpre class=\"brush:go;toolbar:false\">beego.AddFuncMap("asset", utils.Fis)\u003C\u002Fpre>\u003Cp>然后你就可以在模版中这样引入js或者css文件了\u003Cbr\u002F>\u003C\u002Fp>\u003Cpre class=\"brush:html;toolbar:false\">{{template "inc\u002Fheader.tpl" .}}\n{{asset "sass\u002Flogin.scss"}}\n\t<div class="info">&nbsp<\u002Fdiv>\n\t<div class="login">\n\t\t<form action="\u002Flogin">\n\t\t\t<ul>\n\t\t\t\t<li><label for="">用户名<\u002Flabel><input type="text" name="username" id=""><\u002Fli>\n\t\t\t\t<li><label for="">密码<\u002Flabel><input type="password" name="password" id=""><\u002Fli>\n\t\t\t\t<li class="login-btns">\n\t\t\t\t\t<button class="btn">{{i18n "login"}}<\u002Fbutton>\n\t\t\t\t\t<a class="btn oauth-login" href="https:\u002F\u002Fgithub.com\u002Flogin\u002Foauth\u002Fauthorize?client_id={{.github_client_id}}&scope=user,public_repo" target="_blank"><span class="octicon octicon-logo-github"><\u002Fspan>登录<\u002Fa>\n\t\t\t\t<\u002Fli>\n\t\t\t<\u002Ful>\n\t\t<\u002Fform>\n\t<\u002Fdiv>\n{{asset "js\u002Fuser.js"}}\n{{template "inc\u002Ffooter.tpl" .}}\u003C\u002Fpre>\u003Cp>其中\u003C\u002Fp>\u003Cpre class=\"brush:html;toolbar:false\">{{asset "sass\u002Flogin.scss"}}\u003C\u002Fpre>\u003Cp>便是引入"sass\u002Flogin.scss"对应的编译后的css文件。\u003C\u002Fp>\u003Cp>如此，便实现了利用fis的md5映射功能，现在可以放心开启js和css的强制缓存了。最后附上我自己的项目地址供大家借鉴\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fduguying\u002Fojsite\">https:\u002F\u002Fgithub.com\u002Fduguying\u002Fojsite\u003C\u002Fa> 。\u003C\u002Fp>",{"title":17,"list":18},"最热文章",[19,25,27,33,39,45,51,57,63,69],{"id":20,"title":21,"uri":22,"author":9,"created_at":23,"view_count":24},28,"docker容器目录与主机目录同步","\u002Farticle\u002Fdocker容器目录与主机目录同步","2014-12-31 12:34:08",15573,{"id":7,"title":8,"uri":26,"author":9,"created_at":13,"view_count":14},"\u002Farticle\u002Fbeego中使用fis",{"id":28,"title":29,"uri":30,"author":9,"created_at":31,"view_count":32},20,"用github登录，oauth开发","\u002Farticle\u002F用github登录，oauth开发","2014-11-23 13:33:37",9115,{"id":34,"title":35,"uri":36,"author":9,"created_at":37,"view_count":38},18,"windows服务注册工具nssm","\u002Farticle\u002Fwindows服务注册工具nssm","2014-10-31 21:34:39",9054,{"id":40,"title":41,"uri":42,"author":9,"created_at":43,"view_count":44},49,"用latex排版中文书籍","\u002Farticle\u002F用latex排版中文书籍","2016-10-31 11:12:02",8645,{"id":46,"title":47,"uri":48,"author":9,"created_at":49,"view_count":50},19,"texlive中文书签乱码","\u002Farticle\u002Ftexlive中文书签乱码","2014-11-15 02:54:01",8466,{"id":52,"title":53,"uri":54,"author":9,"created_at":55,"view_count":56},6,"Windows上的软件包管理器chocolatey","\u002Farticle\u002FWindows上的软件包管理器chocolatey","2014-08-10 15:55:22",8012,{"id":58,"title":59,"uri":60,"author":9,"created_at":61,"view_count":62},3,"利用开源和免费资源搭建CI环境","\u002Farticle\u002F利用开源和免费资源搭建CI环境","2014-07-04 16:54:58",7740,{"id":64,"title":65,"uri":66,"author":9,"created_at":67,"view_count":68},16,"php-fpm网站目录权限配置","\u002Farticle\u002Fphp-fpm网站目录权限配置","2014-10-18 01:36:10",7276,{"id":70,"title":71,"uri":72,"author":9,"created_at":73,"view_count":74},27,"sublime text 2插件开发，外部修改文件无法重新加载","\u002Farticle\u002Fsublime text 2插件开发，外部修改文件无法重新加载","2014-12-26 20:24:13",7055,{"title":76,"list":77},"按月归档",[78,82,85,88,91,94,97,101,105,108,111,114,118,121,124,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,205,208,211,214,217,220],{"title":79,"uri":80,"view_count":81},"2026年7月","\u002Farchive\u002F2026\u002F7\u002F1","[1]",{"title":83,"uri":84,"view_count":81},"2026年1月","\u002Farchive\u002F2026\u002F1\u002F1",{"title":86,"uri":87,"view_count":81},"2025年4月","\u002Farchive\u002F2025\u002F4\u002F1",{"title":89,"uri":90,"view_count":81},"2024年6月","\u002Farchive\u002F2024\u002F6\u002F1",{"title":92,"uri":93,"view_count":81},"2024年5月","\u002Farchive\u002F2024\u002F5\u002F1",{"title":95,"uri":96,"view_count":81},"2024年4月","\u002Farchive\u002F2024\u002F4\u002F1",{"title":98,"uri":99,"view_count":100},"2023年12月","\u002Farchive\u002F2023\u002F12\u002F1","[6]",{"title":102,"uri":103,"view_count":104},"2023年11月","\u002Farchive\u002F2023\u002F11\u002F1","[2]",{"title":106,"uri":107,"view_count":81},"2023年10月","\u002Farchive\u002F2023\u002F10\u002F1",{"title":109,"uri":110,"view_count":81},"2023年7月","\u002Farchive\u002F2023\u002F7\u002F1",{"title":112,"uri":113,"view_count":104},"2023年6月","\u002Farchive\u002F2023\u002F6\u002F1",{"title":115,"uri":116,"view_count":117},"2023年5月","\u002Farchive\u002F2023\u002F5\u002F1","[3]",{"title":119,"uri":120,"view_count":104},"2023年4月","\u002Farchive\u002F2023\u002F4\u002F1",{"title":122,"uri":123,"view_count":104},"2023年3月","\u002Farchive\u002F2023\u002F3\u002F1",{"title":125,"uri":126,"view_count":127},"2023年2月","\u002Farchive\u002F2023\u002F2\u002F1","[5]",{"title":129,"uri":130,"view_count":81},"2023年1月","\u002Farchive\u002F2023\u002F1\u002F1",{"title":132,"uri":133,"view_count":104},"2022年12月","\u002Farchive\u002F2022\u002F12\u002F1",{"title":135,"uri":136,"view_count":127},"2022年11月","\u002Farchive\u002F2022\u002F11\u002F1",{"title":138,"uri":139,"view_count":140},"2022年10月","\u002Farchive\u002F2022\u002F10\u002F1","[4]",{"title":142,"uri":143,"view_count":100},"2022年9月","\u002Farchive\u002F2022\u002F9\u002F1",{"title":145,"uri":146,"view_count":127},"2022年8月","\u002Farchive\u002F2022\u002F8\u002F1",{"title":148,"uri":149,"view_count":81},"2019年7月","\u002Farchive\u002F2019\u002F7\u002F1",{"title":151,"uri":152,"view_count":81},"2019年2月","\u002Farchive\u002F2019\u002F2\u002F1",{"title":154,"uri":155,"view_count":81},"2018年9月","\u002Farchive\u002F2018\u002F9\u002F1",{"title":157,"uri":158,"view_count":81},"2018年8月","\u002Farchive\u002F2018\u002F8\u002F1",{"title":160,"uri":161,"view_count":81},"2017年11月","\u002Farchive\u002F2017\u002F11\u002F1",{"title":163,"uri":164,"view_count":81},"2017年8月","\u002Farchive\u002F2017\u002F8\u002F1",{"title":166,"uri":167,"view_count":81},"2017年5月","\u002Farchive\u002F2017\u002F5\u002F1",{"title":169,"uri":170,"view_count":81},"2017年4月","\u002Farchive\u002F2017\u002F4\u002F1",{"title":172,"uri":173,"view_count":81},"2016年11月","\u002Farchive\u002F2016\u002F11\u002F1",{"title":175,"uri":176,"view_count":81},"2016年10月","\u002Farchive\u002F2016\u002F10\u002F1",{"title":178,"uri":179,"view_count":104},"2016年9月","\u002Farchive\u002F2016\u002F9\u002F1",{"title":181,"uri":182,"view_count":81},"2016年8月","\u002Farchive\u002F2016\u002F8\u002F1",{"title":184,"uri":185,"view_count":104},"2016年7月","\u002Farchive\u002F2016\u002F7\u002F1",{"title":187,"uri":188,"view_count":127},"2016年6月","\u002Farchive\u002F2016\u002F6\u002F1",{"title":190,"uri":191,"view_count":81},"2015年12月","\u002Farchive\u002F2015\u002F12\u002F1",{"title":193,"uri":194,"view_count":81},"2015年10月","\u002Farchive\u002F2015\u002F10\u002F1",{"title":196,"uri":197,"view_count":104},"2015年2月","\u002Farchive\u002F2015\u002F2\u002F1",{"title":199,"uri":200,"view_count":81},"2015年1月","\u002Farchive\u002F2015\u002F1\u002F1",{"title":202,"uri":203,"view_count":204},"2014年12月","\u002Farchive\u002F2014\u002F12\u002F1","[8]",{"title":206,"uri":207,"view_count":104},"2014年11月","\u002Farchive\u002F2014\u002F11\u002F1",{"title":209,"uri":210,"view_count":127},"2014年10月","\u002Farchive\u002F2014\u002F10\u002F1",{"title":212,"uri":213,"view_count":117},"2014年9月","\u002Farchive\u002F2014\u002F9\u002F1",{"title":215,"uri":216,"view_count":117},"2014年8月","\u002Farchive\u002F2014\u002F8\u002F1",{"title":218,"uri":219,"view_count":117},"2014年7月","\u002Farchive\u002F2014\u002F7\u002F1",{"title":221,"uri":222,"view_count":104},"2013年9月","\u002Farchive\u002F2013\u002F9\u002F1",1,{"url":225,"title":226},"https:\u002F\u002Fimage.duguying.net\u002F2022\u002F09\u002Fij6x8o4s.webp","老家 摄于2020年秋",1790781593605]