Question

我遇到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的当前Webpack设置

//----------------------------------
//
// 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',
      }),
    ],
  };
};

Answer 1

您的设置方式看起来很正确，因此我敢保证问题出在您的webpack.config.js文件中。

假设您正在使用Webpack 4，则需要引用code-splitting docs。

具体来说，请确保已配置chunkFilename选项。另外，您可以添加诸如/* webpackChunkName: "dynamic-video-component" */之类的注释指令，以便于调试。

使用react-loadable将未使用的动态模块从包中排除

1 个答案: