Razzle: Пример комплектации поставщика

То же самое здесь, не работает.

Привет! Итак, вот сделка между открытым исходным кодом и моей повседневной работой и жизнью, а также тем, что нет, мне есть чем управлять, поэтому я использую бота GitHub для автоматизации некоторых вещей здесь и там. Этот конкретный бот GitHub собирается пометить его как устаревший, потому что в последнее время он не выполнял никаких действий. Он будет закрыт, если в течение нескольких дней не будет никакой активности. Не принимайте это на свой счет - серьезно - это полностью автоматизированное действие. Если это ошибка, просто оставьте комментарий, отправьте мне DM, отправьте курьера или дымовой сигнал.

Связка поставщиков очень важна, поэтому было бы неплохо исправить это. Возможно, у меня будет время посмотреть на это в ближайшие несколько недель

Привет, этот пример все еще не работает. Я не могу понять почему. Пакет поставщика не включает кода реакции, как и другие библиотеки. Пожалуйста, кто-нибудь может мне с этим помочь? Спасибо

Изучите документацию по splitChunks и комплектации поставщика. Это должно вам помочь.

Сотрите это. Пробовал несколько вещей, но не смог заставить работать splitChunks. У меня нет времени заниматься этим прямо сейчас.

Есть обновления по этому поводу? Мне действительно нужно, чтобы разделение поставщиков работало, так как после разделения кода с помощью react-loadable размер основного пакета по-прежнему составляет 1 МБ после gzip 😭

Хорошо, я не уверен, решает ли это проблему, но вместо этого я заставил разделение поставщиков работать с использованием cacheGroups.
Для примера with-vendor-bundle я сделал следующее:

config.optimization = {
   ...config.optimization,
   splitChunks: {
      cacheGroups: {
         chunks: 'all',
         name: 'vendor',
         test: 'vendor',
      }
   }
}

Этот поток из stackoverflow мне помог.

Последовательный сайт Webpack: пример разделенных кусков

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }

Это сработало для меня. Я вижу, что vendor.chunks.js правильно обслужены.

И нам даже не нужна эта часть в примере (мы все еще работаем, когда комментируем ее), хотя мы не знаем, как мы справляемся с razzle / polyfills.

      config.entry.vendor = [
        require.resolve('razzle/polyfills'),
        require.resolve('react'),
        require.resolve('react-dom'),
        // ... add any other vendor packages with require.resolve('xxx')
      ];

Если @jaredpalmer поможет подтвердить, что это правильный путь, я могу отправить PR, чтобы обновить пример.

@ 6thfdwp Я могу подтвердить, что ваше решение у меня тоже сработало. Спасибо, что поделились этим.

Чтобы включить razzle / polyfills в свой пример, я думаю, вы должны просто сделать это:

vendor: {
  test: /[\\/]node_modules[\\/](razzle|react|react-dom)[\\/]/,
  name: 'vendor',
  chunks: 'all',
}

В документах явно указывается, что каждый модуль включается в поставщик, тогда как использование test будет соответствовать структуре каталогов в node_modules . Оба способа будут работать, просто разные варианты использования.

Изменить: похоже, что отключает разделение пакета поставщика на куски, что не идеально для производственных сборок (см. Здесь ). Таким образом, он будет работать, но увеличит размер файла пакета поставщика и предотвратит его разбиение на части, что может быть не идеально.

Чтобы поддерживать разделение пакетов поставщика в производственной среде, кажется, вам нужно использовать ManifestPlugin webpack, поскольку assets-webpack-plugin razzle, похоже, не сообщает о них. Я придумал такое решение:

// Some additional imports:

const ManifestPlugin = require('webpack-manifest-plugin');
const { extname } = require('path');

// Replace the existing AsetsWebpackPlugin with ManifestPlugin:

      config.plugins = config.plugins.map((plugin) => {
        if (plugin.constructor.name === 'AssetsWebpackPlugin') {
          return new ManifestPlugin({
            fileName: '../assets.json',
            writeToFileEmit: true,
            generate: (seed, files) => (
              files.filter(file => !file.isAsset).reduce((manifest, { name, path }) => {
                // Group files by extension in the manifest
                const ext = extname(path).substr(1);
                manifest[ext] = manifest[ext] || [];
                manifest[ext].push(path);
                return manifest;
              }, seed)
            ),
          });
        }

        return plugin;
      });

// Do vendor splitting:

      config.entry.vendor = [
        require.resolve('razzle/polyfills'),
        require.resolve('react'),
        require.resolve('react-dom'),
      ];

      config.optimization = {
        splitChunks: {
          chunks: 'all',
          name: dev ? 'vendor' : false,
        },
      };

Вам нужно указать name для конфигурации splitChunks в dev, иначе она по какой-то причине будет бесконечно перекомпилирована.

Затем вы можете импортировать все активы в свое приложение следующим образом:

  ${assets.css ? assets.css.reduce((styles, asset) => `${styles}<link rel="stylesheet" ref="${asset}">`, '') : ''}

  ${assets.js.reduce((scripts, asset) => `${scripts}<script src="${asset}" defer></script>`, '')}

Возможно, Razzle следует перейти на использование ManifestPlugin ? Я видел это здесь , так что это может быть хорошей причиной для этого.

@scraton Спасибо за то, что поделились и объяснили.

Таким образом, то, что вы предложили здесь, приведет к созданию большего количества фрагментов, в то время как пример сайта Webpack с использованием

   test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
   name: 'vendor',

всегда будет давать один кусок vendor.chunks.js как я его видел, включая все пакеты, прошедшие тест, реагировать, реагировать и т. д.

Это также причина того, что with-vendor-example не работает? Я не уверен, правильно ли я понимаю это, любое объяснение будет оценено, спасибо!

Я сделал еще одну попытку, но безуспешно. Использование splitChunks приводит к бесконечным перезагрузкам, и что бы я ни делал, vendor.js не создается. Пробовал различные .env vars RAZZLE_DEV_BUNDLE_PATH , RAZZLE_BUNDLE_PATH но манифест всегда содержит ключ поставщика, который содержит стандартный URL-адрес пакета

Хорошо, сделал это. Понятия не имею, почему я этого не сделал раньше. Вот мой рабочий конфиг.
Если у кого-то есть предложения по оптимизации, я бы хотел их услышать.

if (target === 'web') {

    newConfig.output.filename = dev
        ? 'static/js/[name].js'
        : 'static/js/[name].[hash:8].js';

    newConfig.optimization = {
        ...newConfig.optimization,
        splitChunks: {
            cacheGroups: {
                // Chunk splitting optimiztion
                dte: {
                    test: /[\\/]node_modules[\\/](luxon|@date-io\/luxon)[\\/]/,
                    name: 'dte',
                    reuseExistingChunk: true,
                    priority: -30,
                },
                redux: {
                    test: /[\\/]node_modules[\\/](redux|react-redux)[\\/]/,
                    name: 'redux',
                    reuseExistingChunk: true,
                },
                graphql: {
                    test: /[\\/]node_modules[\\/](graphql|react-apollo|apollo-cache-inmemory|apollo-client|apollo-link|apollo-link-context|apollo-link-http|apollo-link-ws|apollo-utilities)[\\/]/,
                    name: 'apollo',
                    reuseExistingChunk: true,
                },
                form: {
                    test: /[\\/]node_modules[\\/](yup|react-final-form|final-form)[\\/]/,
                    name: 'form',
                    reuseExistingChunk: true,
                    priority: -30,
                },
                vendor: {
                    test: /[\\/]node_modules[\\/](react|react-dom|@lingui|react-router|react-router-dom)[\\/]/,
                    name: 'vendor',
                    reuseExistingChunk: true,
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
            },
        },
    };
}

@mschipperheyn Не могли бы вы прислать PR?

Должно быть исправлено в dev, но не с использованием поставщиков, а конфигурации chunkGroups