Webpack Angular Code Splitting

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.ensure中使用require.include来加载我的文件，因为我需要它们并且它不起作用。我已将我的libs路径放在require.ensure（[]）数组中，但它不起作用。

如果我在webpack.config.js中添加第二个条目并将所有的lib放在一个名为＆＃39; vendor＆＃39;或者如果我使用require（）而不是require.ensure（）。

加载我的角度材料库约为1.5 MB，大约需要30秒或1米。当应用程序加载时，它有一个白色屏幕，直到所有libs加载。这就是我需要编码拆分的原因。我正在使用webpack-dev-server，它会抛出以下错误

请帮忙。

Answer 1

看起来我需要使用ocLazyLoading动态加载模块。我还了解到，当您想要加载模块，模板或库时，您需要知道位置和触发器。在我的情况下，我需要在路由上加载带有ocLazyLoading的模块。