weback4 создание файла поставщика для реагирующего компонента

Question

Я использую webpack4 для разделения кода в моем приложенииactjs. Я использую следующий webpack.config.js для приложения activjs:

 webpack.config.js file:
     const config = {
         entry: {
             client: APP_DIR + '/index.js',
         },
         output: {
             filename: '[name].bundle.dev.js',
             path: BUILD_DIR,
             publicPath : '/js/',
                 chunkFilename: '[name].[chunkhash].js'
             },
             mode : 'development',
             module: {
                 rules: [
                 {
                     test: /\.(jsx|js)?$/,
                     exclude: /(node_modules\/)/,
                     use: {
                         loader: "babel-loader",
                         options: {
                             presets: ['react', 'es2015','stage-2'], // Transpiles JSX and ES6
                         }
                     }
                 },
                 {
                     test: /\.(css)?$/,
                     use: [
                         'css-loader',
                     ],
                 },
             ],
             },
             plugins: [
                 new webpack.DefinePlugin({
                     'process.env.NODE_ENV': JSON.stringify('development')
                 }),
             };

Файл

rout.js:

import {HomePage,DetailPage} from './reactcomponents';

export default function() {
    return (
        <Switch>
            <Route exact={true} path = "/" component={HomePage}/>   
            <Route path = {"/([a-zA-Z0-9\-\ ]*)/abc/([a-zA-Z0-9\-\ ]*)-:listingId"} component={DetailPage}/>
        </Switch>
    )
}

после запуска конфигурации webpack, webpack генерирует 4 файла:

• client.bundle.js,
• homepage.bundle.js,
• detailpage.bundle.js
• и поставщики ~ detailpage.bundle.js.

Какая польза от файла "vendors ~ detailpage.bundle.js" в webpack4 и
почему генерируется файл vendors ~ detailpage.bundle.js? Мне не хватает какой-либо опции конфигурации веб-пакета?

Answer 1

Я предлагаю вам прочитать эту страницу split-chunks-plugin .

Как вы можете видеть, веб-пакет автоматически разделяет порции на основе следующих условий:

1. Новый блок может быть общим или ИЛИ модули из папки node_modules
2. Новый блок будет больше 30 КБ (до мин + gz)
3. Максимальное количество параллельных запросов при загрузке чанков по требованию. будет меньше или равно 5
4. Максимальное количество параллельных запросов при начальной загрузке страницы будет ниже или равно 3
5. При попытке выполнить два последних условия большие куски предпочтительным.

Для получения дополнительной информации читайте плагин split chunk docs