Fala galera. Essa é dúvida uma conceitual.
Recentemente eu comecei a desenvolver uma aplicação SPA (Single Page Aplication) fazendo uso do conceito de renderização parcial, utilizando ui Router
(mais informações sobre ui Router aqui).
Foi então que conforme a aplicação foi crescendo e ficando com mais funcionalidades e mais informações eu vi que para o conceito de SPA eu tinha uma única página - podem chamar como quiser (index.html, layout.html, base.html, etc...) - e nela eu importo dezenas de arquivos javascript, pois eles representam minha aplicação.
E como é uma SPA e apenas partes da páginas vão sendo renderizadas conforme a requisição eu preciso que todos os componentes, controladores, diretivas e etc estejam disponíveis logo ao iniciar a aplicação.
Isso causa um efeito em cascata, pois quanto maior a aplicação maior o número (ou tamanho) de arquivos que minha página carrega logo que o usuário acessa.
Exemplo:
Eu tenho os seguintes arquivos
app.js
routes.js
controllers/
|--------- users/
|--------------- UserControler.js
|--------------- UserProfileController.js
|--------- appointments/
|--------------- AppointmentsControler.js
|--------- tasks/
|--------------- TasksControler.js
|--------------- TasksManagerController.js
directives/
|--------- basic/
|--------------- DropdownPattern.js
|--------- users/
|--------------- RefreshForm.js
services/
|--------- users/
|--------------- UsersServices.js
E por ai vai, aqui foi apenas um exemplo (bem próximo da minha aplicação)
Então na página principal da minha aplicação fica.
<script type="text/javascript" src"libs/angularjs.js">
<script type="text/javascript" src"libs/ui-router.js">
<script type="text/javascript" src"libs/angular-resource.js">
<script type="text/javascript" src"app.js">
<script type="text/javascript" src"routes.js">
<!-- Controllers import -->
<script type="text/javascript" src"controllers/users/UserControler.js">
<script type="text/javascript" src"controllers/users/UserProfileController.js">
<script type="text/javascript" src"controllers/appointments/AppointmentsControler.js">
<script type="text/javascript" src"controllers/tasks/TasksControler.js">
<script type="text/javascript" src"controllers/tasks/TasksManagerController.js">
<!-- Directives import -->
<script type="text/javascript" src"directives/basic/DropdownPattern.js">
<script type="text/javascript" src"directives/users/RefreshForm.js">
<!-- Services import -->
<script type="text/javascript" src"services/users/UsersServices.js">
Já deu para entender onde eu quero chegar né?
Esse é o padrão, a arquitetura correta para uma aplicação SPA? Existe uma outra maneira de usar rotas com server para carregar os arquivos conforme eles forem sendo solicitados?
Por que imagino que na aplicação final o primeiro load da página onde TUDO vai ser carregado para ficar no cache do browser vai ser um load muito demorado.