背景

公司项目的模式是后端给给模板塞一些静态数据, 加载前端放在cdn上的js,css, js负责动态的构建整个dom, 采用的框架是React. 某日需要添加一个新的页面, 遂写了一个模板html给server, 写好了js,css的路径, 让他response出来. 折腾了一下午, js文件正常加载, css正常加载, 可是整个页面空空如也, html里边只有个id为app的div(ps: 这是一个范式了, 我们会用react做, 往这个app里填东西).

漫长的bug寻找过程

  1. 是有缓存吗?

我甚至将所有近七天的浏览器数据都清除了, 重启Fiddler, 勾选disable cache. 反正能试的我都试了.

  1. 是打包出问题了吗?

用的是webpack打包的, 我尝试去加个alert(3), 然后在打包后的文件去搜索, 发现是能搜索到的?

  1. 是不是我里边的小组件有问题?

我尝试在根级组件加了乱七八糟的东西, 结果还是啥都没有?

  1. 是不是还有其他的依赖没有下载下来?

我将他的network与其他页面的对比, 试图发现不同, 但并没有对结果又影响的不同.

  1. 还是问问老大吧?

我厚着脸皮发微信问老大, 然而,,,他在开会, 还开了很久.

终于找到了

就在我几近崩溃之时, 我趴在桌上还html结构发现,,,,原来是这里. 我的HTML在浏览器显示是这样的.

1
2
3
<scritp src = 'aaa.js'></script>
</body>
</script>

在看我给后端的模板, 发现我写成了这样.

1
<scritp src = 'aaa.js' />

哎哎哎, 害死人啊. 这样写浏览器会照常下载, 但构建的html结构不对, 引入的文件也不会执行.

总结一下

应该正确使用html标签, 该是自闭合的就得自闭合, 该写两个标签闭合的就写两个标签闭合. 不要因为几次写错标签找瞎了眼, 找白了头.