0

我有一个问题react-loadable，我有一个很大的组件列表，这些组件可能会或可能不会根据用户生成的内容呈现。我正在使用 switch 语句来呈现正确的语句。

用户生成内容的（简化）列表可能如下所示：

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

现在，我想要做的是只有使用的组件进入捆绑包。相反，包含在以下 switch case 中的所有这些都包含在捆绑包中。为什么？

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

1 回答 1

0

你设置它的方式看起来是正确的，所以我敢打赌问题出在你的webpack.config.js文件中。

假设你使用的是 Webpack 4，你需要参考code-splitting docs。

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

于 2018-09-04T23:16:06.183 回答