clojurescript编译后合并css文件解决缓存问题

cljs

发布日期: 2020-01-02

文章字数: 743

阅读时长: 3 分

阅读次数:

clojurescript项目用shadow-cljs编译后将所有css文件压缩成一个，并加版本号访问较少缓存。

简书地址

背景

本篇跟electron安装包里封装浏览器直接访问URL配置有关。

我们目前的配置用shadow-cljs release app 打包好js文件后，需要将入口文件、图片、css、js一起copy到部署服务器。
其中css是散碎的各个页面自行添加的样式文件。
但是用electron直接访问URL以后，css总是被缓存下来，这样就导致了一个系统修改的样式后在应用里打开不生效的问题。

方案

将在部署时将众多css文件内容合并到一个css文件，然后在入口的index.html里引入这个被合并的css文件，同时加上版本号，禁止缓存。

实施

第一步，准备脚本

因为使用jenkins发布，所以先搞一个合并文件的脚本(merge_css.sh)，等着在jenkins里远端执行一下。内容如下：

#!/bin/bash
#获取第一个参数,目标目录
srcpath=$1
#第二个参数，输出文件
target_file=$2
#先删除原目标文件
rm -rf ${target_file};
function writeByDir(){
  echo $1
  for file in $1/*
    do
      if test -f $file
        then
    echo $file
        cat "$file" >> "${target_file}"
        echo "" >> "${target_file}"
      else
        writeByDir $file
     fi
  done
}
writeByDir ${srcpath}

很简单，连参数合理性都没有校验，自己用自己知道就行。

第二步，远端执行
在jenkins里，跟原来一样，将css、img、index.html、app.js核心文件rsync -rzve 到远端以后，再构建最后加一个合并的shell
```
ssh -p2020 root@*.*.*.* 'bash -s ' < /opt/auto-deploy-scripts/merge_css.sh /opt/site/project/css /opt/site/project/css/main.css
```
在原来的css文件下，将生成一个main.css文件。

第三步，使用合并的css文件

<html lang="cn">
<head>
    <title>平台</title>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link href="https://cdn.bootcss.com/antd/3.18.0/antd.min.css" rel="stylesheet">
</head>

<body>
<!-- Our JavaScript will modify the DOM inside this element -->
<div id="app"></div>
<script type="text/javascript">
    document.write("<link rel='stylesheet' type='text/css' href='css/main.css?v="+new Date().getTime()+"'>");
</script>

<script type="text/javascript">
    document.write("<script type='text/javascript' src='doctorjs/app.js?v="+new Date().getTime()+"' type='text/javascript'><\/script>");
</script>

</body>
</html>