clojurescript编译后合并css文件解决缓存问题
2020-01-02 本文已影响0人
小马将过河
背景
本篇跟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>
经检查，已生效。
完！！！
image.png
遗留问题
- 本地开发因为没有压缩成一个css文件，所以可能会提示main.css下载404，可以创建个同名空文件
- 因为单个页面还是引用的自己的css文件，所以那些碎片css文件加载完成前页面元素还是聚集在view的左上角。加上合并的css，相当于双重样式。
- 还是把css都复制到了远端，做好了当然是编译时就编译成一个文件，并且去重，压缩等等，能集成webpack了再搞
