打包RequireJS“文本！”模块

Question

我试图弄清楚是否（以及如何，如果可能的话）使用RequireJS optimization tool 不仅包括我的 JavaScript 模块，还包括我的“文本！”模块。我正在开发一个使用“文本”的 Durandal 应用程序！视图模块。

有时我们的用户在尝试加载视图时会超时。这是一个错误示例：

Error: Load timeout for modules: text!views/primaryapplicants.html
http://requirejs.org/docs/errors.html#timeout

I've got another question I just posted about handling that timeout。我不知道如何拦截它并重试。我知道模块定义是有效的，只是客户可能有网络连接问题——尤其是如果他们使用手机的话。

然而，当我继续思考这一点时，我意识到如果我可以简单地将整个应用程序打包到一个文件中，那么我们可以避免额外的 HTTP 调用——这可能会减少这样的超时。这意味着应用程序要么加载，要么不加载——而不是“部分”加载的可能性。

这个应用没有大量的浏览量。我估计使用 gzip 压缩添加每个视图会增加大约 20kb。

那么，是否可以打包这些“文本！”模块以某种方式启动？

Answer 1

有inlineText build config option（默认为true）指示优化器完全按照您的意愿行事。需要注意的一点是，与任何其他模块一样，它只会检测在某些模块的 define() 块中指定的依赖项。换句话说，它将无法检测到按需请求的 text! 依赖项，除非它们被明确地设置为可访问 - 这就是您的问题所在。

一种解决方法（如果您有许多视图文件，则远非理想）是指定您在构建配置中的 include option 中使用的每个 text! 依赖项，例如：

// ...
include: ["text!views/primaryapplicants.html",
  "text!views/secondaryapplicants.html",
  // etc.
]
// ...

Answer 2

您可能想尝试一下 Durandal 的优化器 weyland。可以在 HTML StarterKit 中找到一个示例 weyland-config.js 配置。

https://github.com/BlueSpire/Durandal/blob/master/platforms/HTML/StarterKit/weyland-config.js

exports.config = function(weyland) {
    weyland.build('main')
        .task.jshint({
            include:'app/**/*.js'
        })
        .task.uglifyjs({
            include:['app/**/*.js', 'lib/durandal/**/*.js']
        })
        .task.rjs({
            include:['app/**/*.{js,html}', 'lib/durandal/**/*.js'],
            loaderPluginExtensionMaps:{
                '.html':'text'
            },
            rjs:{
                name:'../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                insertRequire:['main'], //not needed for require
                baseUrl : 'app',
                wrap:true, //not needed for require
                paths : {
                    'text': '../lib/require/text',
                    'durandal':'../lib/durandal/js',
                    'plugins' : '../lib/durandal/js/plugins',
                    'transitions' : '../lib/durandal/js/transitions',
                    'knockout': '../lib/knockout/knockout-2.3.0',
                    'bootstrap': '../lib/bootstrap/js/bootstrap',
                    'jquery': '../lib/jquery/jquery-1.9.1'
                },
                inlineText: true,
                optimize : 'none',
                pragmas: {
                    build: true
                },
                stubModules : ['text'],
                keepBuildDir: true,
                out:'app/main-built.js'
            }
        });
}