Исключить неиспользуемые динамические модули из пакета, используя реагирующую загрузку - PullRequest
Новая
       7

Исключить неиспользуемые динамические модули из пакета, используя реагирующую загрузку

0 голосов
/ 05 сентября 2018

У меня проблема с react-loadable, когда у меня есть большой список компонентов, которые могут отображаться или не отображаться в зависимости от содержимого, созданного пользователем. Я использую оператор switch для рендеринга правильных.

(упрощенный) список пользовательского контента может выглядеть следующим образом:

const content = ['Paragraph', 'Image', 'Paragraph', 'Canvas'];

Теперь я хочу, чтобы в комплект входили ТОЛЬКО используемые компоненты. Вместо этого ВСЕ из них, включенные в следующий случай коммутатора, находятся в комплекте. Почему? 

const collection = (name) => {
   switch(name) {
     case 'Paragraph':
       return Loadable({
         loader: () => import('dynamic-paragraph-component'),
         loading(){ return null }
        })
     case 'Video':
        return Loadable({
         loader: () => import('dynamic-video-component'),
         loading() { return null }
        })
     // etc
   }
}

Например, dynamic-video-component попадает в пакет, даже если он не используется. Есть ли способ предотвратить это?

Текущая настройка веб-пакета с Webpack 4 

//----------------------------------
//
// Bundler
//
//----------------------------------

import webpack from 'webpack';
import path from 'path';
import { ReactLoadablePlugin } from 'react-loadable/webpack';


module.exports = (files) => {
  console.log(files);


  return {
    mode: 'production',
    entry: './src/client/index.js',
    output: {
      filename: './main.pkgd.js',
      chunkFilename: './[name].pkgd.js',
      path: path.resolve(__dirname, 'tmp'),
      publicPath: '/',
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              [
                'env',
                {
                  modules: false,
                  targets: {
                    browsers: ['last 2 versions'],
                  },
                },
              ],
              'flow',
              'react',
            ],
            plugins: [
              'transform-class-properties',
              'syntax-dynamic-import',
              'react-loadable/babel',
            ],
          },
        },
      ],
    },

    optimization: {
      splitChunks: {
        cacheGroups: {
          default: false,
          vendors: false,

          // vendor chunk
          vendor: {
            name: 'vendor',
            chunks: 'all',
            test: /node_modules/,
            priority: 20,
            reuseExistingChunk: true,
            enforce: true,
          },
          common: {
            name: 'main',
            minChunks: 1,
            chunks: 'initial',
            priority: 10,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      },
    },


    plugins: [
      new webpack.DefinePlugin({
        __isBrowser__: 'true',
        env: {
          NODE_ENV: JSON.stringify('production'),
        },
      }),
      new ReactLoadablePlugin({
        filename: './tmp/react-loadable.json',
      }),
    ],
  };
};

1 Ответ

0 голосов
/ 05 сентября 2018

То, как вы его настроили, выглядит правильно, поэтому я готов поспорить, что проблема в вашем файле webpack.config.js.

Предполагая, что вы используете Webpack 4, вам нужно сослаться на документы с разделением кода .

В частности, убедитесь, что вы настроили опцию chunkFilename. Кроме того, вы можете добавить директивы комментариев, такие как /* webpackChunkName: "dynamic-video-component" */ для упрощения отладки.

...