Упаковка RequireJS "текст!" Модулі - knockout.js, requirejs, durandal, комплектування та мінімізація, r.js

Я намагаюся з'ясувати, якщо (і як, якщо це можливо) використовувати Інструмент оптимізації RequireJS включити не тільки мої модулі JavaScript, але й мій "текст!" модулів. Я працюю над додатком Durandal, який використовує модулі "text!" Для перегляду.

Іноді у нас є користувачі, які отримують тайм-аут, який намагається завантажити завантаження. Приклад помилки:

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

У мене є інше питання, яке я щойно опублікував про обробку цього тайм-ауту. Я не можу "з'ясувати, як перехопити його і спробувати ще раз. Я знаю, що визначення модуля є дійсним, це просто те, що клієнти можуть мати проблему підключення до мережі - особливо, якщо вони" "на мобільному телефоні.

Проте, як я продовжував обдумувати це, язрозумійте, що якщо б я міг просто упакувати всю програму в один файл, то ми могли б уникнути додаткових викликів HTTP - які могли б скоротити таймаути, як це. Це означало б, що додаток або завантажується, або він не "t - замість можливості" часткового "завантаження.

Ця програма не має великої кількості переглядів. Я вважаю, що додавання кожного перегляду додасть близько 20 кб із стисненням gzip.

Отже, чи можна упакувати ці "тексти!" модулі як-небудь?

Відповіді:

Існує inlineText параметр build config (істина за замовчуванням), яка вказує оптимізатору робити саме те, що ви хочете. Одне застереження полягає в тому, що воно, як і будь-який інший модуль, виявлятиме лише залежності, зазначені в деяких модулях define() блок. Іншими словами, він не зможе виявити text! залежностей, які запитуються на вимогу, якщо тільки вони не будуть доступними явно, - і тут лежить проблема.

Одним з обхідних шляхів (далеко не ідеальним, якщо у вас є багато файлів перегляду) буде вказати кожен text! залежність, яку ви використовуєте в include варіант у вашому конфігурації збирання, наприклад:

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

Можливо, ви захочете спробувати оптимізатор weyland, Durandal. Приклад конфігурації weyland-config.js можна знайти в HTML StarterKit.

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"
}
});
}