0

我正在为我的 TypeScript 项目使用 requirejs 和 AMD 模块，目前有大约 20 个不同的源文件，并且可能会大幅增长。所有这些都有效，但是加载所有 20 个文件非常慢，因此最好将它们缩小。但由于 requirejs 想要加载所有内容，似乎需要我将模块保存在单独的文件中 - 我认为我不能只获取生成的 module1.js 和 module2.js 文件并将它们缩小为一个文件，然后让 requirejs 在不更改某些代码的情况下加载这些文件。（我可能错了。）

我看到的另一种方法是使用 requirejs 提供的 r.js 文件以仍然让 requirejs 满意的方式将所有不同的文件合并在一起。但是 r.js 需要 node.js，如果有任何其他方法可以做到这一点，我宁愿不要在我的构建过程中将其作为依赖项引入。

因此，在我深入研究并尝试六种不同的解决方案之前——其他人是如何通过大型项目来解决这个问题的？

4

2 回答 2

1

您可以做的是实现一个瘦 RequireJS shim 以在缩小的构建中使用。取决于你想使用多少 RequireJS API，你可以用很少的东西来解决问题。为简单起见，您还可以使用命名模块。

比如说，在开发过程中，您使用 RequireJS 来加载您的模块。当您想要进行缩小构建时，您可以简单地在缩小文件中包含一个简单的加载程序。

如果您有文件 app.js、foo.js 和 bar.js，如下所示：

//from app.js  
define("app", ["foo", "bar"], function(foo, bar) { 
    return {
        run: function() { alert(foo + bar); }
    }
});

//from foo.js
define("foo", [], function() { 
    return "Hello ";
});

//from bar.js
define("bar", [], function() { 
    return "World!";
});

假设您将所有这些文件一起缩小。在文件的顶部，您包含以下 shim：

//from your-require-shim.js
(function(exports) {

    var modules = {};

    var define  = function(name, dependencies, func) { 
        modules[name] = {
            name:name,
            dependencies:dependencies,
            func:func,
            result:undefined
        };
    };

    var require = function(name) {

        var module = modules[name];

        //if we have cached result -> return
        if(module.result) { return module.result; }

        var deps = [];
        //resolve all dependencies
        for(var i=0,len=module.dependencies.length;i<len;i++) { 
            var depName = module.dependencies[i];
            var dep = modules[depName];
            if(!dep.result) { 
                //resolve dependency
                require(depName);
            }
            deps.push(dep.result);
        }

        module.result = module.func.apply(this, deps );

        return module.result;
    };
    exports.require = require;
    exports.define = define;
}(window));

并执行 app.js 中定义的模块

require("app").run();

就像在这个小提琴中一样。

当然，这是一个粗略的 PoC，但我相信你明白其中的意思。

于 2012-12-11T20:24:06.580 回答
0

如果您使用的是 ASP.NET MVC 4，则可以制作一个捆绑包，当您在一组文件或文件夹中部署到生产环境时，它会缩小所有内容。您可以在此处找到有关捆绑包的更多信息。

于 2012-12-12T02:21:04.257 回答