My current project setup is causing some loading issues due to the large download size of Angular Material. As a result, a white screen remains loading for around 45 seconds. I have attempted to implement code splitting to enhance the loading speed of my application, but I am encountering errors in the process. Unfortunately, code splitting does not seem to be effective in my case.

core/app.module.js

'use strict';

require.ensure([], function (require) {

    require('angular/angular.min');
    require('angular-aria/angular-aria.min');
    require('angular-animate/angular-animate.min');
    require('angular-ui-router/release/angular-ui-router.min');

}, 'common');

var page1Module = require('./../page1/page1.module');
var page2Module = require('./../page2/page2.module');
var appRunBlock = require('./app.run');
var appConfig = require('./app.config');

var moduleName = 'app';

var app = angular.module(moduleName, [
        'ui.router',
        page1Module,
        page2Module
    ])
    .config(appConfig)
    .run(appRunBlock);

module.exports = moduleName;

page1/page1.module.js

'use strict';

require.ensure([], function (require) {

    require('angular-material/modules/js/core/core.min.js');
    require('angular-material/modules/js/core/core.min.css');
    require('angular-material/modules/js/core/default-theme.js');
    require('angular-material/modules/js/button/button.min.js');
    require('angular-material/modules/js/button/button.min.css');

}, 'page1');

var page1Route = require('./page1.route');
var page1Controller = require('./page1.controller');

var moduleName = 'app.page1';

angular.module(moduleName, [
        'material.components.button'
    ])
    .config(page1Route)
    .controller('Page1Controller', page1Controller);

module.exports = moduleName;

page2/page2.module.js

'use strict';

require.ensure([], function (require) {

    require('angular-material/modules/js/core/core.min.js');
    require.include('angular-material/modules/js/core/core.min.css');
    require.include('angular-material/modules/js/core/default-theme.js');
    require('angular-material/modules/js/toolbar/toolbar.min.js');
    require('angular-material/modules/js/toolbar/toolbar.min.css');
    require('angular-material/modules/js/content/content.min.js');
    require('angular-material/modules/js/content/content.min.css');
    require('angular-material/modules/js/input/input.min.js');
    require('angular-material/modules/js/input/input.min.css');

}, 'page2');

var page2Route = require('./page2.route');
var page2Controller = require('./page2.controller');

var moduleName = 'app.page2';

angular.module(moduleName, [
        'material.components.toolbar',
        'material.components.content',
        'material.components.input'
    ])
    .config(page2Route)
    .controller('Page2Controller', page2Controller);

module.exports = moduleName;

I have included my webpack.config.js

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');

var webpack_config = {
    context: path.join(__dirname + '/app'),
    entry: {
        app: './core/app.module.js'
    },
    output: {
        path: path.join(__dirname + '/release'),
        publicPath: 'http://localhost:8080/',
        filename: '/js/[name].js',
        chunkFilename: '/js/[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                exclude: 'node_modules',
                loader: 'style!css'
            },
            {
                test: /\.scss$/,
                exclude: 'node_modules',
                loader: 'style!css!sass'
            },
            {
                test: /\.html$/,
                exclude: 'node_modules',
                loader: 'ngtemplate?relativeTo=' + (path.join(__dirname, './app')) + '/!html?' +
                JSON.stringify({attrs: ['img:src', 'img:ng-src', 'md-icon:md-svg-src']})
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin([
            {from: './index.html', to: './index.html'}
        ])
    ],
    devServer: {
        contentBase: path.resolve('./release')
    },
    watch: true
};

module.exports = webpack_config;

I have attempted to utilize require.include within require.ensure to load my files as needed, but it has not been successful. I have also added my library path in the require.ensure([]) array without success.

The only effective solution so far has been to create a second entry in webpack.config.js and consolidate all my libraries into a common chunk named 'vendor', or to use require() instead of require.ensure().

Due to the large size of the Angular Material library (approximately 1.5 MB), the loading time ranges from 30 seconds to 1 minute. The white screen during loading until all libraries are loaded has prompted me to explore code splitting. I am currently using webpack-dev-server and encountering the following errors https://i.sstatic.net/mK9IL.png

I would greatly appreciate any assistance. Thank you.