建站新手必避的7大运维坑：第5个90%人忽略的CSS部署雷区

　　两个月之前，我蹲在IDC机房听空调外机嗡嗡响——那声音像一百台旧式传真机在同时收发。监控大屏右下角又跳了一条报警：/static/css/app.5a3f8b.css 404。不是CDN缓存没刷，是压根没上传。运维小张在钉钉群@我三次，头像挂着“已读不回”，第三条后面跟了个捂脸表情包，眼睛都没睁全。

　　这个我敢打包票：90%的新手CSS部署雷区，根本不在@media断点写错、不在!important滥用、不在flex子项忘设flex-shrink——在build后那一步：你本地跑通了，就真当它上了线？

　　我原以为只是路径配置漏了publicPath。结果打开部署脚本看了三遍，发现build命令后面还卡着个&& rm -rf ./dist/css/——上个月改CI的时候顺手加的，说“清理冗余”，结果没改正则，把所有.css都当冗余清了。而线上Nginx只配了/static/css/，压根不认/dist/css/。所以不是404，是0个文件被Nginx看见。

　　工位左边那盒冷掉的黄焖鸡，米饭表面结了层半透明膜。旁边同事老刘正在后台导蜘蛛日志，一边导一边念：“301跳转链太长，百度爬虫直接放弃……”我没接话，因为知道他导的是上周的，而上周我们刚把style.css从根目录挪到cdn.example.com/static/，但robots.txt里还写着Disallow: /static/css/——这行禁令现在拦的是自家CDN。

　　CSS部署的优胜劣汰，不是淘汰写得丑的，是淘汰那种——写完就run，跑通就merge，压测过QPS，却连线上HTTP响应头都没扫一眼的人。你信不信？我见过三个站，CSS加载耗时2.3秒，FMP拖到7秒，最后查出来是CDN节点把text/css的Cache-Control设成no-cache——还是因为备案审核期间手动临时改的，忘了回滚。

文章配图，仅供参考

　　还有个细节特别操蛋：某CMS前端插件，开发时用的是webpack dev server的内存编译，所有CSS走eval；上线前切production模式，插件内部却硬编码了__webpack_require__.m['./src/index.css']，结果构建后module id乱掉，CSSloader根本找不着引用。我debug了十八秒，在控制台console.log(require.cache)里翻出十七个带.css后缀却内容为空的对象——像一排空药盒，标签贴得整整齐齐，里面全是空气。

　　群里@我的不止小张。技术总监王姐上午十点零七分发来一张图：Google Search Console里CSS阻塞渲染的警告截图，底下留言“这算P0吗”。我没回。因为十分钟前刚看到SEO同事发的收录下降日报，原因栏写着“首屏关键CSS缺失”，而我们的LCP检测工具显示LCP元素就是那个用了background-image: url(/images/banner.jpg)的div——可它的class里有transition: background-color .3s，这个CSS却被CDN拦截了：URL里含/images/，触发了某个边缘规则，误判为敏感路径。

　　说实话，现在看那些新手在群里问“怎么让CSS更快”，我后怕得想删聊天记录。不是不会答，是答了等于白答。你跟他说“开HTTP/2 push”，他转身就去改Apache配置，却没发现push的资源列表写死了old.css，而build后生成的是old.2a4e5c.css；你跟他说“拆CSS按路由加载”，他第二天就在Vue Router里配了component: () => import('./views/Home.vue')，却漏掉了配套的style块——于是home页渲染完才开始fetch home.css，然后重新重绘。这种事，教十遍，八遍白教。

　　昨天下午茶时间，运维小张端着保温杯路过，杯底磕在我键盘托上发出闷响。他说：“你上次说的那个‘部署后校验CSS存在性’的shell脚本，我抄过去了。” 我点点头。他停顿两秒，又补了句：“就是加了curl -I检查header，再grep Content-Type。” 我嗯了一声，没说其实那脚本在CDN回源时会失效——因为curl默认直连IP，绕过了CDN的host header劫持逻辑。

　　行吧，我现在手边开着VS Code，光标停在package.json的"build": "vue-cli-service build && node check-css.js"这一行。check-css.js目前只校验文件是否存在。我正想着要不要加一句fs.readFileSync('./dist/index.html', 'utf8').includes('app.')——但万一他们用runtimePublicPath动态拼路径呢？又或者用了critical CSS inline，而external部分藏在data-v-xxx属性里？

　　算了，先去热那盒黄焖鸡。微波炉转了二十七秒，转盘吱呀一声停住。饭盒盖掀开，白气扑上来，糊住了屏幕右下角还在跳的报警灯。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!