html中require.config 缓存问题

在html中，require的官方基本用法如下：

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

        <script data-main="scripts/main" src="scripts/require.js"></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

但在实践过程中，我们可能会有很多需要配置的，比如jquery...

然后我们大约会把这些配置写到配置文件，如下：

// require.config.js

require.config({

    paths: {

        jquery    : "/js/library/jquery.min",

    },

    shim : {

    }

});

然后，再在 main.js 中引用

//mian.js

require(["/js/require.config.js"],function(){

    "use strict";

    require(["jquery"], function ($) {

        //功能代码

    });

})

因为网页缓存问题，这种方式存在当 require.config.js 有修改时，客户端的 require.config.js 并不会更新的问题。同时如果有多个html都用了require，那每个模块的 main.js 都需要在头部加上述代码。

既然在require中引用 config，会有缓存问题，那我就把 require.config.js 放到 html ，并且增加版本控制。但需要注意的是， rquire.config.js 必须放到 require.js 后面，因为他用到了require类。

如下

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

        <script data-main="scripts/main" src="scripts/require.js"></script>

        <script src="scripts/require.config.js?v=xxx"></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

这种形式会存在一个新的问题：当 require.config.js 修改后，由于 require.js 已经在浏览器缓存，所以很快（快到 require.config.js 还未加载完成）就会加载 main.js ，此时 man.js 没有享受到 require.config.js 中的配置。

这里我想到了 require.js 的模式（先加载 require.js , 再加载 main.js ）与现在的需求（先加载 require.config.js ，再加载 main.js ）大概相同。所以看了 require.js 中的实现，把相关部分的代码复制到 require.config.js 。

最终，我使用的代码样例如下：

需要注意的是：html 中，需要移动 data-main 的位置：

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

             scripts/main.js after require.js loads. -->

        <script src="scripts/require.js"></script>

        <!-- data-main 移动到这里 -->

        <script src="scripts/require.config.js?v=xxx" data-main="scripts/main" ></script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

// require.config.js

;(function () {

    let rev = 'xxxx';

    let cfg = {

        // 不设置超时 = 0

        waitSeconds: 60,

        paths: {

            'jquery': '../../../../Common/Common/jquery-3.3.1/dist/jquery.min',

        },

        shim: {

            'jquery': {exports: 'jQuery'},

        },

        urlArgs: function (id, url) {

            if (url.indexOf('http') === 0) {

                return '';

            }

            let args = `rev=${rev}`;

            // /Common/Common 下的文件不用版本控制, 都是 3 方库

            if (url.indexOf('/Common/Common/') >= 0) {

                args = 'v=2'

            }

            return (url.indexOf('?') === -1 ? '?' : '&') + args;

        }

    };

    let dataMain = '';

    let scripts = document.getElementsByTagName('script');

    for (let i = scripts.length - 1; i > -1; i -= 1) {

        let script = scripts[i];

        let src = script.getAttribute('src');

        if (src.indexOf('require.common.config.js') > 0) {

            dataMain = script.getAttribute('data-main');

            if (dataMain) {

                //Preserve dataMain in case it is a path (i.e. contains '?')

                let mainScript = dataMain;

                //Set final baseUrl if there is not already an explicit one,

                //but only do so if the data-main value is not a loader plugin

                //module ID.

                if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {

                    //Pull off the directory of data-main for use as the

                    //baseUrl.

                    src = mainScript.split('/');

                    mainScript = src.pop();

                    let subPath = src.length ? src.join('/') + '/' : './';

                    cfg.baseUrl = subPath;

                }

            }

            break;

        }

    }

    require.config(cfg);

    if (dataMain) {

        require([dataMain]);

    }

}());

巴特西

html中require.config 缓存问题

最新文章

热门文章