Разбиение углового кода Webpack

Question

В настоящее время у меня есть проект, подобный этому: Поскольку угловой материал является большой загрузкой для моего проекта, белый экран остается загруженным около 45 секунд. Я пытаюсь выполнить разделение кода, чтобы ускорить загрузку приложения, но я получаю ошибки. Разделение кода, похоже, не работает для меня.

ядро ​​/ 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; 

стр.1/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; 

страница2/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; 

У меня есть этот 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; 

Я пытался использовать require.include внутри require.ensure, чтобы загрузить свои файлы, как мне они нужны, и он не работает. Я поместил свой путь libs в массив require.ensure ([]), и он не работает.

Единственный раз, когда он работает, если я поместил вторую запись в файл webpack.config.js и поместил все мои библиотеки в общий фрагмент с именем «vendor» или если я использую require() not require.ensure().

Загрузка моего углового материала lib составляет около 1,5 МБ и занимает около 30 с или 1 м. Когда приложение загружается, он имеет белый экран, пока не загрузятся все библиотеки. Именно по этой причине мне нужно закодировать раскол. Я использую webpack-dev-сервер, и он вызывает следующие ошибки:

Помогите.

Answer 1

Похоже, мне нужно было использовать ocLazyLoading для динамической загрузки модулей. Я также узнал, что вам нужно знать место, а также триггер, когда вы хотите загрузить свои модули, шаблон или lib. В моем случае мне нужно было загрузить мои модули с помощью ocLazyLoading на маршруте.