背景
被pm吐槽页面加载不够快，第一次使用require.js进行模块化。于是操起了chrome dev tool的timeline，看到了一个很大的问题，就是requirejs加载依赖之前，消耗了1秒多。其实在require.config那里我引用了8个dependencies，但是为了方便展示，就只剩下两个了。
问题定位
为了方便定位的确是requirejs的问题，我去掉了多余代码，确定就是requirejs的问题。代码如下：
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
<link rel="stylesheet" href="//cdn.hongbaorili.com/wind/static/assets/common.css">
<script src="//cdn.hongbaorili.com/wind/static/lib/flexible.min.js"></script>
<script src="//cdn.hongbaorili.com/wind/static/lib/require.min.js"></script>
<script>
require.config({
waitSeconds: 60, // 因为有1+s的延迟，默认的超时时间较短，为了功能正常运行才设置的
urlArgs: "v=201703301443",
paths: {
"zepto": "//cdn.hongbaorili.com/wind/static/lib/zepto",
"API": "//cdn.hongbaorili.com/wind/static/lib/api",
},
shim: {
"zepto": {
exports: "$"
},
'API': {
deps: ['zepto'],
exports: "API"
}
}
});
require(['zepto', 'API'], function($, API) {
...
});
</script>
</head>
<body>
</body>
</html>timeline
请教
这么怎么导致的？
如何优化?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
把所有
<script>标签全部移往</body>标签前，<head>里只保留css就好；另外既然用了requirejs就不要单独写js库的标签了，统一加载多好。要不试试 seajs？
1.把script移到</body>上面
2.可以使用
requirejs optimizer，把js文件整合在一起，减少http请求。这个问题在requirejs的issue也有人提到过，但是没有提出解决方案，我放弃requirejs了，直接用webpack了。