javascript - RrequireJS优化器以及优化后加载动态路径

Question

我有一个包含 requirejs 的繁重任务，并且正在运行优化器。

我加载了很多运行时并不总是需要的外部文件，通常我只需要少数核心文件。然后根据用户的决定，我在运行时加载某些文件。

例如:

define(["backbone",     'text!data/filePaths.json'],
    function(Backbone,   filePaths) {
        'use strict';

        return Backbone.Model.extend({

            initialize: function(){
                // parse the file paths, there could be a hundred here
                this.filePaths = JSON.parse(filePaths);
            },

            // dynamically add a file via this function call
            addFile: function(id){
                var self = this;

                return new Promise(function(resolve, reject){     

                    // load files dynamically based on the id passed in
                    require([self.filePaths[id].path], function(View){
                        resolve(new View());
                    });


                });
            }

        });

    }

);

文件路径 json 可能如下所示:

"ONE": {
    "name": "BlueBox",
    "path": "views/box/Blue"
},
"TWO": {
    "name": "RedBox",
    "path": "views/box/Red"
},
etc...

问题是这对我来说不适用于优化器。

当我使用优化后的文件运行我的应用程序时，我得到:

Uncaught Error: undefined missing views/box/Red

更新:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    requirejs: {
        desktopJS: {
            options: {
                baseUrl: "public/js/app",
                wrap: true,
                // Cannot use almond since it does not currently appear to support requireJS's config-map
                name: "../libs/almond",
                preserveLicenseComments: false,
                optimize: "uglify2",
                uglify2: {
                    // mangle: false,
                    // no_mangle: true,
                    // stats: true,
                    // "mangle-props": false,
                    "max-line-len": 1000,
                    max_line_length: 1000
                },
                uglify: {
                    mangle: false,
                    no_mangle: true,
                    stats: true,
                    "mangle-props": false,
                    max_line_length: 1000,
                    beautify: true
                },
                mainConfigFile: "public/js/app/config/config.js",
                include: ["init/DesktopInit"],
                out: "public/js/app/init/DesktopInit.min.js"
            }
        },
        desktopCSS: {
            options: {
                optimizeCss: "standard",
                cssIn: "./public/css/desktop.css",
                out: "./public/css/desktop.min.css"
            }
        }
    },

注意:如果我使用未优化的版本，一切正常。

Answer 1

优化器无法跟踪没有字符串数组形式的依赖项的 require 调用的依赖项。您的调用是优化器无法处理的 require 调用的示例，因为依赖项列表是在运行时计算的:

require([self.filePaths[id].path], function(View){

原因很简单:优化器在优化模块时不会评估它们。无论如何，self.filePaths[id].path 的可能值的数量可能是无限的，因此优化器无法处理所有情况。因此，当优化器优化您的代码时，应由此 require 调用加载的模块不会包含在 bundle 中。您在 your own answer 中提到了一种解决方案是使用 include 来包含可以由该 require 调用加载的所有可能的模块。

正如您所指出的，如果您可以拥有数百个模块，这意味着将它们全部包含在优化器生成的包中。还有其他选择吗？是的，有。

您可以生成一个仅包含应用程序的其他模块的 bundle ，并将上面的 require 调用要加载的模块保留为单独加载，而不是作为 bundle 。啊，但是您在问题中显示的具体配置有问题。您有一条评论说您不能使用杏仁。然而，事实上你确实使用了它，就在下一行。 (你的答案中也有它。)问题是 Almond 的限制之一是它不进行动态加载。这是 list of restrictions 中的第一个限制。 为此，您必须使用功能齐全的 AMD 加载器，例如 RequireJS 本身。