如何优化requirejs开始加载依赖之前耗了1s+

发布于 2022-09-04 18:56:35 字数 1670 浏览 16 评论 0

背景
被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
图片描述