Ответ 1
RequireJs имеет инструмент оптимизации, который может помочь вам минимизировать и объединить ваши модули. Он имеет множество опций и может быть трудным в использовании, но с помощью инструмента построения, такого как GruntJs или (особенно) Yeoman, который использует GruntJs для сборки.
В обоих случаях вы можете использовать задачу rjs
(которая оптимизирует модули), но снова Yeoman немного проще, поскольку у нее есть генераторы, которые будут настраивать ее уже для вас:
// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
В index.html
вы просто используете строку комментария, чтобы указать, какие js файлы должны быть минитизированы/объединены в выходной файл:
<!-- build:js scripts/amd-app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
В приведенном выше примере модули будут объединены в один файл с именем amd-app.js
.
Edit:
Это будет выполнено путем выполнения grunt
из командной строки. Это запустит множество полезных задач, которые будут строить проект в папке dist
, но опять же это очень удобно.
Результирующий файл index.html
(в dist
) имеет только (если хотите) один файл javascript:
<script src="scripts/15964141.amd-app.js"></script>
Мой совет: используйте Йомен, чтобы облегчить жизнь (по крайней мере, для обработки minification/concatenation).