Как правильно организовать сборку проекта Angular, а также подключение файлов?

Question

[Виктор Новиков]

На данный момент я изучаю webpack.
Создал тестовое angular приложение (SPA)...

Вроде бы все шевелится, компилируется и запускается.
Но в процессе штамповки новых контроллеров немного призадумался над тем, что собранный файл растет не по дням, а в зависимоти от количества наштампованных плюшек...

Немного о том, как у меня там все накуралесено:

Сторона AngularJS - Роутинг:
Все просто, есть куча стейтов, которые подключают нужный контроллер и шаблон

import mainController from './app/main/components/main.component.js';
import mainTemplate from './components/navbar/navbar.pug';

// some code
  $stateProvider.state('/', {
    url: '/', // root route
    template: mainTemplate,
    controller: mainController
  });

Сторона WebPack - конфигурация
Проектик имеет одну-единственную точку входа app.js, файлы angular выносятся в отдельный файлик vendor

config.entry = {
    app: './src/app.js',
    vendor: [
      'angular',
      'angular-ui-router'
    ]
  };

  config.output = {
    path: path.join(__dirname, '/.tmp/'),
    filename: '[name].entry.js',
    publicPath: `/`,
    chunkFilename: '[name].commons.js'
  };

Собственно, так называемые, лоадеры. Используется babel. Шаблончики написаны на pug(быший jade), также, с целью изучения. Использую Sass препроцессор, стили вытаскиваются из js файлов и хранятся отдельно.

config.module = {
    loaders: [
      // JS loader
      // Reference: https://github.com/babel/babel-loader
      {
        test: /\.js$/,
        loader: 'babel',
        include: [
          path.resolve(__dirname, 'src/')
        ]
      },
      // Images loader
      {
        test: /\.(png|jpg|jpeg|gif|svg)([\?]?.*)$/,
        loader: 'file?name=./assets/images/[name].[ext]'
      },
      // Fonts loader
      {
        test: /\.(woff|woff2|ttf|eot)([\?]?.*)$/,
        loader: 'file?name=./assets/fonts/[name].[ext]'
      },
      // Pug HTML loader
      {
        test: /\.pug$/,
        loader: 'pug-html',
        query: {
          // Allow to use attrs without values
          // Issue: https://github.com/pugjs/pug/issues/1180
          doctype: 'html'
        }
      },
      // Sass loader
      {
        test: /\.(scss|sass)$/,
        loader: extractTextPlugin.extract('style', ['css?sourceMap', 'sass?sourceMap'])
      }
    ],
    // Adds and removes AngularJS dependency injection annotations
    // Reference: https://github.com/olov/ng-annotate
    postLoaders: [{
      test: /\.js$/,
      loader: 'ng-annotate?single_quotes'
    }]
  };

Собственно и прихожу к вопросу о том, как бы все это устроить так, чтобы, так называемый, app.entry.js не раздувался, так то, по-моему не очень хорошо, что в него складываются все файлы проекта. Это что же получается. Пользователь зашел на сайт, ему открылась только главная, а он как-ни крути скачает app.entry.js, в котором код не только для главной, но и скажем, для личного кабинета, страницы товаров, карточки товаров, галереи там... Нехорошо ведь.

В общем, буду благодарен за любые ссылки и наводки. Нагуглить ничего толкового не получается, каюсь

Comments

[Владимир]

По мне, так загрузка js особенно если бек поддерживает gzip - плевое дело, хуже если придется ждать загрузки контроллера перед тем как его использовать.

[Виктор Новиков]

Владимир: спасибо за ответ, протестирую вариант с gzip дабы глянуть размер файлов в итоге

Answer 1

[Faliah]

Гуглите что-то вроде: webpack lazyload с добавлением angularjs и прочих слов. Вот несколько ссылок, что удалось найти:

• Для начала секция из официальной документации webpack - ссылка
  
• Code splitting с примерами - ссылка
  
• Lazy load AngularJS with Webpack - ссылка
  
• webpack-angular-lazyload - репозиторий с примером - ссылка
  
  

Comments

[Виктор Новиков]

Спасибо большое, посмотрю