[{"data":1,"prerenderedAt":225},["ShallowReactive",2],{"article-beego中使用fis":3},{"title":4,"article":5,"hot_article":15,"month_arch":74,"cover":222},"beego中使用fis - 独孤影的博客",{"id":6,"title":7,"uri":7,"author":8,"tags":9,"created_at":12,"view_count":13,"content":14},21,"beego中使用fis","duguying",[10,11],"beego","fis","2014-12-03 10:47:56",9250,"\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":16,"list":17},"最热文章",[18,24,26,32,38,44,50,56,62,68],{"id":19,"title":20,"uri":21,"author":8,"created_at":22,"view_count":23},28,"docker容器目录与主机目录同步","\u002Farticle\u002Fdocker容器目录与主机目录同步","2014-12-31 12:34:08",15570,{"id":6,"title":7,"uri":25,"author":8,"created_at":12,"view_count":13},"\u002Farticle\u002Fbeego中使用fis",{"id":27,"title":28,"uri":29,"author":8,"created_at":30,"view_count":31},20,"用github登录，oauth开发","\u002Farticle\u002F用github登录，oauth开发","2014-11-23 13:33:37",9113,{"id":33,"title":34,"uri":35,"author":8,"created_at":36,"view_count":37},18,"windows服务注册工具nssm","\u002Farticle\u002Fwindows服务注册工具nssm","2014-10-31 21:34:39",9047,{"id":39,"title":40,"uri":41,"author":8,"created_at":42,"view_count":43},49,"用latex排版中文书籍","\u002Farticle\u002F用latex排版中文书籍","2016-10-31 11:12:02",8634,{"id":45,"title":46,"uri":47,"author":8,"created_at":48,"view_count":49},19,"texlive中文书签乱码","\u002Farticle\u002Ftexlive中文书签乱码","2014-11-15 02:54:01",8461,{"id":51,"title":52,"uri":53,"author":8,"created_at":54,"view_count":55},6,"Windows上的软件包管理器chocolatey","\u002Farticle\u002FWindows上的软件包管理器chocolatey","2014-08-10 15:55:22",8009,{"id":57,"title":58,"uri":59,"author":8,"created_at":60,"view_count":61},3,"利用开源和免费资源搭建CI环境","\u002Farticle\u002F利用开源和免费资源搭建CI环境","2014-07-04 16:54:58",7732,{"id":63,"title":64,"uri":65,"author":8,"created_at":66,"view_count":67},16,"php-fpm网站目录权限配置","\u002Farticle\u002Fphp-fpm网站目录权限配置","2014-10-18 01:36:10",7274,{"id":69,"title":70,"uri":71,"author":8,"created_at":72,"view_count":73},27,"sublime text 2插件开发，外部修改文件无法重新加载","\u002Farticle\u002Fsublime text 2插件开发，外部修改文件无法重新加载","2014-12-26 20:24:13",7054,{"title":75,"list":76},"按月归档",[77,81,84,87,90,93,96,100,104,107,110,113,117,120,123,127,130,133,136,140,143,146,149,152,155,158,161,164,167,170,173,176,179,182,185,188,191,194,197,200,204,207,210,213,216,219],{"title":78,"uri":79,"view_count":80},"2026年7月","\u002Farchive\u002F2026\u002F7\u002F1","[1]",{"title":82,"uri":83,"view_count":80},"2026年1月","\u002Farchive\u002F2026\u002F1\u002F1",{"title":85,"uri":86,"view_count":80},"2025年4月","\u002Farchive\u002F2025\u002F4\u002F1",{"title":88,"uri":89,"view_count":80},"2024年6月","\u002Farchive\u002F2024\u002F6\u002F1",{"title":91,"uri":92,"view_count":80},"2024年5月","\u002Farchive\u002F2024\u002F5\u002F1",{"title":94,"uri":95,"view_count":80},"2024年4月","\u002Farchive\u002F2024\u002F4\u002F1",{"title":97,"uri":98,"view_count":99},"2023年12月","\u002Farchive\u002F2023\u002F12\u002F1","[6]",{"title":101,"uri":102,"view_count":103},"2023年11月","\u002Farchive\u002F2023\u002F11\u002F1","[2]",{"title":105,"uri":106,"view_count":80},"2023年10月","\u002Farchive\u002F2023\u002F10\u002F1",{"title":108,"uri":109,"view_count":80},"2023年7月","\u002Farchive\u002F2023\u002F7\u002F1",{"title":111,"uri":112,"view_count":103},"2023年6月","\u002Farchive\u002F2023\u002F6\u002F1",{"title":114,"uri":115,"view_count":116},"2023年5月","\u002Farchive\u002F2023\u002F5\u002F1","[3]",{"title":118,"uri":119,"view_count":103},"2023年4月","\u002Farchive\u002F2023\u002F4\u002F1",{"title":121,"uri":122,"view_count":103},"2023年3月","\u002Farchive\u002F2023\u002F3\u002F1",{"title":124,"uri":125,"view_count":126},"2023年2月","\u002Farchive\u002F2023\u002F2\u002F1","[5]",{"title":128,"uri":129,"view_count":80},"2023年1月","\u002Farchive\u002F2023\u002F1\u002F1",{"title":131,"uri":132,"view_count":103},"2022年12月","\u002Farchive\u002F2022\u002F12\u002F1",{"title":134,"uri":135,"view_count":126},"2022年11月","\u002Farchive\u002F2022\u002F11\u002F1",{"title":137,"uri":138,"view_count":139},"2022年10月","\u002Farchive\u002F2022\u002F10\u002F1","[4]",{"title":141,"uri":142,"view_count":99},"2022年9月","\u002Farchive\u002F2022\u002F9\u002F1",{"title":144,"uri":145,"view_count":126},"2022年8月","\u002Farchive\u002F2022\u002F8\u002F1",{"title":147,"uri":148,"view_count":80},"2019年7月","\u002Farchive\u002F2019\u002F7\u002F1",{"title":150,"uri":151,"view_count":80},"2019年2月","\u002Farchive\u002F2019\u002F2\u002F1",{"title":153,"uri":154,"view_count":80},"2018年9月","\u002Farchive\u002F2018\u002F9\u002F1",{"title":156,"uri":157,"view_count":80},"2018年8月","\u002Farchive\u002F2018\u002F8\u002F1",{"title":159,"uri":160,"view_count":80},"2017年11月","\u002Farchive\u002F2017\u002F11\u002F1",{"title":162,"uri":163,"view_count":80},"2017年8月","\u002Farchive\u002F2017\u002F8\u002F1",{"title":165,"uri":166,"view_count":80},"2017年5月","\u002Farchive\u002F2017\u002F5\u002F1",{"title":168,"uri":169,"view_count":80},"2017年4月","\u002Farchive\u002F2017\u002F4\u002F1",{"title":171,"uri":172,"view_count":80},"2016年11月","\u002Farchive\u002F2016\u002F11\u002F1",{"title":174,"uri":175,"view_count":80},"2016年10月","\u002Farchive\u002F2016\u002F10\u002F1",{"title":177,"uri":178,"view_count":103},"2016年9月","\u002Farchive\u002F2016\u002F9\u002F1",{"title":180,"uri":181,"view_count":80},"2016年8月","\u002Farchive\u002F2016\u002F8\u002F1",{"title":183,"uri":184,"view_count":103},"2016年7月","\u002Farchive\u002F2016\u002F7\u002F1",{"title":186,"uri":187,"view_count":126},"2016年6月","\u002Farchive\u002F2016\u002F6\u002F1",{"title":189,"uri":190,"view_count":80},"2015年12月","\u002Farchive\u002F2015\u002F12\u002F1",{"title":192,"uri":193,"view_count":80},"2015年10月","\u002Farchive\u002F2015\u002F10\u002F1",{"title":195,"uri":196,"view_count":103},"2015年2月","\u002Farchive\u002F2015\u002F2\u002F1",{"title":198,"uri":199,"view_count":80},"2015年1月","\u002Farchive\u002F2015\u002F1\u002F1",{"title":201,"uri":202,"view_count":203},"2014年12月","\u002Farchive\u002F2014\u002F12\u002F1","[8]",{"title":205,"uri":206,"view_count":103},"2014年11月","\u002Farchive\u002F2014\u002F11\u002F1",{"title":208,"uri":209,"view_count":126},"2014年10月","\u002Farchive\u002F2014\u002F10\u002F1",{"title":211,"uri":212,"view_count":116},"2014年9月","\u002Farchive\u002F2014\u002F9\u002F1",{"title":214,"uri":215,"view_count":116},"2014年8月","\u002Farchive\u002F2014\u002F8\u002F1",{"title":217,"uri":218,"view_count":116},"2014年7月","\u002Farchive\u002F2014\u002F7\u002F1",{"title":220,"uri":221,"view_count":103},"2013年9月","\u002Farchive\u002F2013\u002F9\u002F1",{"url":223,"title":224},"https:\u002F\u002Fimage.duguying.net\u002F2022\u002F09\u002Fij6x8o4s.webp","老家 摄于2020年秋",1790062261492]