Fatal编程技术网
  • requirejs/
  • 将RequireJS优化分为多个模块

将RequireJS优化分为多个模块

requirejs

将RequireJS优化分为多个模块,requirejs,r.js,requirejs-optimizer,Requirejs,R.js,Requirejs Optimizer,我正在尝试使用RequireJS将我们的JS模块化为几个更大的JS文件，以便可以按需加载依赖项，但在加载页面时不需要下载一个大的JS 例如，JS文件如下所示： js/main.js js/views/category1/js1.js js/views/category1/js2.js js/views/category2/js1.js js/views/category2/js2.js 应用程序的某些部分（例如，category1中的所有内容）仅由特定类型的用户使用，与category2类似

我正在尝试使用RequireJS将我们的JS模块化为几个更大的JS文件，以便可以按需加载依赖项，但在加载页面时不需要下载一个大的JS

例如，JS文件如下所示：

  • js/main.js
  • js/views/category1/js1.js
  • js/views/category1/js2.js
  • js/views/category2/js1.js
  • js/views/category2/js2.js
应用程序的某些部分（例如，category1中的所有内容）仅由特定类型的用户使用，与category2类似，因此为每个用户加载所有内容是没有意义的

我正在尝试r.js的构建配置，以创建两个动态加载的模块（category1.js和category2.js），其中包含各自js1.js和js2.js文件中的所有代码

({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
    {
        name: 'main',
        exclude: [
            "category1",
            "category2"
        ]
    },
    {
        name: "category1",
        include: [
            "views/category1/js1",
            "views/category1/js2"
        ],
        create: true
    },
    {
        name: "category2",
        include: [
            "views/category2/js1",
            "views/category2/js2"
        ],
        create: true
    }
],
fileExclusionRegExp: /^(r|build)\.js$/,
writeBuildTxt: false,
optimizeCss: 'standard',
removeCombined: true,
paths: {
    jquery: 'lib/jquery',
    underscore: 'lib/underscore',
    backbone: 'lib/backbone/backbone'
},
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        deps: [
            'underscore',
            'jquery'
        ],
        exports: 'Backbone'
    }
}
})
但是，当加载编译后的输出时，浏览器会抱怨找不到视图/category1/js1、视图/category1/js2等等

我甚至不确定是否可以从RequireJS中的多个较小的JS文件创建一些高级模块。有人有过这方面的经验吗

编辑

main.js：

require.config({
    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        }
    },
    paths: {
        jquery: 'lib/jquery',
        underscore: 'lib/underscore',
        backbone: 'lib/backbone/backbone'
    }
});

require([
    'views/app',
    'router'
], function(AppView, Router) {
    new Router();
    Backbone.history.start();
});
index.html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script data-main="js/main" src="js/lib/require/require.js"></script>
</head>
<body></body>
</html>
JS1、JS2等文件是从router.js中引用的。

当您执行
require（['A']，…）
或您有
定义（['A']，…
）时，RequireJS检查其配置以解析名称
A
，并构建用于加载模块
A
的URL。它可能会尝试加载以下内容：

http://localhost/js/A.js
如果您优化模块，使
A
、
B
、
C
包含在名为
category1
的捆绑包中，则您有以下可能性：

  • 加载bundle
    category1
    ，然后请求
    a
    。这很好，因为
    a
    是在加载
    category1
    时找到的

  • 捆绑包尚未加载，但对
    a
    发出了请求。这是一个问题，因为它将以与未进行优化相同的方式解决
    a
    。但您在这里遇到了一个问题，因为如果您优化了模块，那么
    a
    将不再在
    类别1
    之外可用（因为
    removeCombined
    是
    true
    ）

    • 解决方案是在运行时配置中告诉RequireJS包包含要加载的模块。您可以使用此选项。例如：

    bundles: {
  category1: ['A', 'B', 'C']
}
    这告诉RequireJS，“当您想加载模块
    A
    时，加载
    category1
    ，您会在那里找到它”

    请注意，您不必列出捆绑包中的每个模块。例如，如果您有一个模块
    X
    ，并且您知道要加载它的唯一模块是同一捆绑包的一部分，那么您不需要将其作为
    捆绑包中的模块列出