CALL_AND_RETRY_LAST Распределение не выполнено - ошибка кучи JavaScript в памяти при загрузке производственной сборки в Angular 2 с использованием Webpack 2

В моем приложении более 100 файлов router.ts. Я взял производственную сборку, используя Webpack2. Но я получил кучу JavaScript из-за ошибки памяти при создании файлов чанка.

1. service.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
   { path: 'preg', loadChildren: 'dist/modules/executive/service/sla/sla.module#SLAModule'},
   { path: 'mgmt', loadChildren: 'dist/modules/executive/service/quotation/service.quotation.module#ServiceModule'},
   { path: 'approval', loadChildren: 'dist/modules/executive/approval/approval.module#ApprovalModule'},     
 ];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

2. preg.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
   { path: 'customer', loadChildren: 'dist/modules/customer/service/login/login.module#LoginModule'},
   { path: 'customerreg', loadChildren: 'dist/modules/customer/service/registration/registration.module#RegistrationModule'}];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

3. customer.registration.router.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from './registration.component';
const routes: Routes = [
   { path: 'customer', component: RegistrationComponent}];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

Даже я попробовал ниже вариант также:-

node --max-old-space-size=5140 ./node_modules/npm run build_prod

Когда я пытаюсь взять частичную сборку, то она работает идеально. Если я собираюсь собрать целое приложение, оно показало ошибку. Большинство файлов router.ts вложено в родительский router.ts.

файл webpack.config

const path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
var Visualizer = require('webpack-visualizer-plugin');
const ccpOptions = {
    name: 'vendor',
    filename: 'vendor.bundle.js'
};
function root(__path) {
    return path.join(__dirname, __path);
}

module.exports = {
    entry: {
        'vendor': './vendor.ts',
        'app': './main.ts'
    },
    output: {
        //filename: '[name].bundle.js',
        chunkFilename: '[name]-chunk.js',
        //path: path.resolve(__dirname, 'webpack_production/batch_1')
        path: __dirname + '/webpack_production/batch_1', filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js'],
        modules: [
            path.resolve('./modules'),
            'node_modules',
            'packages/node_modules',
            'packages/bower_components'
        ]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    { loader: 'ts-loader' },
                    { loader: 'angular-router-loader' },
                    { loader: 'angular2-template-loader' }
                ],
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, 'packages/node_modules')
                ]
            },
            {
                test: /\.(html|css)$/,
                loader: 'html-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }
                }),
                exclude: [
                    path.resolve(__dirname, 'modules'),
                    path.resolve(__dirname, 'shared-components')
                ]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'cache-loader',
                        options: {
                            cacheDirectory: path.resolve('.cache')
                        }
                    },
                    {
                        loader:'babel-loader',
                        options: {
                            presets: ["es2015",{"modules": false}]
                        }
                    }
                ],
                include: path.resolve('webpack_production/batch_1')
            },
            {
                test: /\.(woff|woff2|eot|ttf)$/,
                loader: 'url-loader?limit=100000'
            },

            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            emitFile: true,
                            outputPath: 'assets/',
                            publicPath: ''
                        },
                    },
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            gifsicle: {
                                interlaced: false,
                            },
                            optipng: {
                                optimizationLevel: 7,
                            },
                            pngquant: {
                                quality: '65-90',
                                speed: 4
                            },
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new ProgressBarPlugin(),
        new Visualizer({ filename: './statistics.html' }),
        new webpack.optimize.CommonsChunkPlugin(ccpOptions),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            root('./src'),
            {}
        ),
        //new ExtractTextPlugin("bundle.min.css"),
        new CleanWebpackPlugin(['webpack_production/batch_1']),
        new HtmlWebpackPlugin({
            title: 'SAMIL New Architecture'
        }),
        new webpack.optimize.LimitChunkCountPlugin({maxChunks: 40}),
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
        // new webpack.optimize.MinChunkSizePlugin({
        //     minChunkSize: 1000 // Minimum number of characters
        // })
    ]
};

0 ответов

Другие вопросы по тегам