Question

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

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

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

Answer 1

您可以做的是实现一个瘦的RequireJS垫片，以便在缩小的构建中使用。根据您想要使用的RequireJS API的数量，您可以获得很少的成功。为简单起见，您还可以使用named modules。

说，开发时使用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!";
});

让我们说你将所有这些文件缩小在一起。在文件的顶部，您包含以下垫片：

//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();

喜欢this fiddle。

当然，这是一个粗糙的PoC，但我确信你明白了。

Answer 2

如果您使用的是ASP.NET MVC 4，则可以创建一个捆绑包，当您在一组文件或文件夹中部署到生产环境时，该捆绑包将缩小所有内容。您可以在bundles here找到更多信息。

缩小TypeScript模块的最佳实践

2 个答案: