Миграция в Webpack CommonsChunkPlugin с двумя именованными кусками, более 50 записей - PullRequest
Новая
       0

Миграция в Webpack CommonsChunkPlugin с двумя именованными кусками, более 50 записей

0 голосов
/ 10 декабря 2018

Наконец-то мы работаем над переводом нашей кодовой базы на Webpack 4, но у нас возникают некоторые проблемы с репликацией настроек, которые у нас сейчас есть, с CommonsChunkPlugin и использованием новых опций splitChunks.Наша сборка веб-пакетов выглядит примерно так: 

const config = {
    entry: {
        vendor: [
            'jquery',
            './libs/global',
            './css/forms.css'
            // ...
        ],
        angular: [
            'angular-timeago',
            'angular-cookies',
            'angular-messages',
            'angular-sanitize',
            'angular-animate',
            './libs/angular-common',
            // ...
        ],
        app1: ['./apps/app1/app'],
        app2: ['./apps/app2/app'],
        app3: ['./apps/app3/app'],
        app4: ['./apps/app4/app'],
        appWithoutAngular: ['./apps/app5/app'],
        app2WithoutAngular: ['./apps/app6/app'],
        // ... (50+ entries, some angular, some not)
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'angular',
            chunks: _.without(_.keys(config.entry), 'vendor', 'appWithoutAngular', 'app2WithoutAngular'), // exclude all non-angular entry points
            minChunks: 2
        }))
    ]
}

Концепция заключается в том, что мы включаем пакет vendor на каждую страницу нашего веб-сайта, а также любые другие страницы, а затем на страницы.для этого нужен угловой, мы также включаем пакет angular и любые другие необходимые записи.Мы не загружаем никакие чанки асинхронно и не нашли подходящую конфигурацию для этого.

Мы попытались сделать следующее: 

config.optimization = {
    splitChunks: {
        cacheGroups: {
            default: false,
            vendors: false,
            vendor: {
                chunks: 'initial',
                priority: 10,
                name: 'vendor_test',
                reuseExistingChunk: true
            },
            angular: {
                chunks: 'initial',
                minChunks: 2,
                name: 'angular_test',
                enforce: true,
                reuseExistingChunk: true,
                test: function(module, chunks){
                    return chunks.some(function(chunk){
                        return nonAngularChunks.includes(chunk.name);
                    });
                }
            }
        }
    }
};

Но это, кажется, генерирует 3+МБ vendor_test чанк (мы привыкли к размеру 100 КБ), и нет angular_test чанка вообще.В идеале, и как это работает в Webpack 3, мы хотели бы заменить точки входа vendor и angular необходимыми зависимостями, которые определяются всеми нашими неугловыми частями, а затем угловыми частями соответственно.

Я до сих пор не нашел способа сделать это с помощью Webpack 4, и надеюсь скоро найти решение.

...