最小化TypeScript模塊的最佳實踐

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的多少，您可以花很少的錢就可以解決。 為簡單起見，您還可以使用命名模塊 。

說，在開發時，您使用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();

就像在這小提琴中一樣 。

當然，這是一個粗略的PoC，但是我敢肯定，您會明白其中的意思。

Answer 2

如果您使用的是ASP.NET MVC 4，則可以制作一個捆綁包，當您將其部署到生產環境中時，它會壓縮文件集或文件夾中的所有內容。 您可以在此處找到有關捆綁銷售商品的更多信息。