鍍金池/ 問(wèn)答/Java  Linux  HTML/ 如何快速給HTML中的js和css文件添加版本號(hào)?

如何快速給HTML中的js和css文件添加版本號(hào)?

找到了用gulp實(shí)現(xiàn)的方法,但是每次都要安裝配置感覺(jué)還是略微繁瑣。
我目前用的主力是vscode,其實(shí)只要能在頁(yè)面加載之前操作HTML里面的DOM元素,獲取到所有的js和css文件,在后綴加一個(gè)當(dāng)前的時(shí)間戳,思路是這樣的,就是不知道有沒(méi)有相關(guān)插件。
大家平時(shí)用的是什么方法呢,求分享~

回答
編輯回答
赱丅呿

你提到的給所有js,css文件添加時(shí)間戳的方法對(duì)于小網(wǎng)站來(lái)說(shuō)無(wú)所謂,完美解決客戶端緩存問(wèn)題。副作用是本來(lái)大部分的js,css文件根本沒(méi)有變化,也要強(qiáng)制客戶端重新加載新版本,降低了頁(yè)面展示速度,不推薦。
邪道
非要用的話,不用到處找插件,可以自己寫(xiě)個(gè) pathBuilder(filePath) 模板方法,這個(gè)方法的作用就是給傳入的路徑后添加一段時(shí)間戳。 然后你在模板文件中調(diào)用這個(gè)方法引入js和css文件。比如

<srcipt src="{pathBuilder('../js/index.js')}"></script>

正道
使用Webpack是目前非常完美省力的解決方式,因?yàn)樗梢裕?/p>

  1. 發(fā)布時(shí)自動(dòng)編譯js和css文件,文件名為該文件的哈希值,文件內(nèi)容不變,哈希值也不變,帶哈希值的文件名即體現(xiàn)了文件版本。
  2. 它可以替換引用js和css的文件,將其改為最終真實(shí)路徑(js和css文件名都被替換)。
2018年8月30日 11:18