How to properly organize the assembly of the Angular project, as well as the inclusion of files?

Question

Angular

I am currently learning webpack.
Created a test angular application (SPA)...
Everything seems to move, compile and run.
But in the process of stamping new controllers, I thought a little about the fact that the assembled file grows by leaps and bounds, but depending on the number of
stamped goodies
...
states that connect the desired controller and template

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 side - Projectic configuration
has a single entry point app.js, files angularare placed in a separate filevendor

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'
  };

Actually, the so-called loaders. Used babel. Templates are written in pug(former jade), also for the purpose of study. I use Sassa preprocessor, styles are pulled from jsfiles and stored separately.

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'
    }]
  };

Actually, I come to the question of how to arrange all this so that the so-called app.entry.jsdoes not swell, because, in my opinion, it is not very good that all project files are added to it. This is what happens. The user went to the site, only the main one opened for him, but anyway he downloads app.entry.js, in which the code is not only for the main one, but also, let's say, for a personal account, product page, product card, gallery there ... Not good after all.
In general, I will be grateful for any links and tips. Googling nothing sensible does not work, I confess

Answer 1

Google something like: webpack lazyload with the addition of angularjs and other words. Here are a few links that we found:

• For starters, a section from the official webpack documentation - link
  
• Code splitting with examples - link
  
• Lazy load AngularJS with Webpack - link
  
• webpack-angular-lazyload - example repository - link