使用 Webpack 构建 ReactJS 应用程序。最近对使用代码分割来减少应用程序大小感兴趣。

我尝试实现一个包装 System.import() 的自定义 HOC:

/* async/index.tsx */ 
... at a very high level looked like... 
class Async extends React ... { 
    componentWillMount() { 
        this.props.load.then(c => { 
            this.component = c; 
            this.setState({loaded:true}); 
        } 
    } 
    render() { 
        return this.component ? <this.component.default {...this.props} /> : <span />; 
    } 
} 
 
/* async/foo/index.tsx */ 
import Async from 'async'; 
const Foo = (props) => ( 
    <Async 
      {...props} 
      load={System.import('async/foo/body')} 
    />); 
 
class Foo ... { 
    ... 
    render = () => <Foo myProp={'bar'} />; 
} 

目前我正在尝试使用react-loadable ( https://github.com/thejameskyle/react-loadable )，这是一个基本上做同样事情但有一些额外功能的包。

问题

这两种方法在本地都可以正常工作，但在部署时就不起作用。 Webpack 配置源自 2017 年 3 月上旬的 React-Starter-App。我的直觉告诉我，webpack 配置是问题的根源，但我不知道如何调试它。

开发配置(有效)

/* relevant configs */ 
module.exports = { 
  entry: [ 
      require.resolve('react-dev-utils/webpackHotDevClient'), 
      require.resolve('./polyfills'), 
      paths.appIndexJs 
  ], 
  output: { 
    path: paths.appBuild, 
    pathinfo: true, 
    filename: 'static/js/bundle.js', 
    publicPath: publicPath 
  }, 
  ... 
  plugins: [ 
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}), 
    new InterpolateHtmlPlugin(env.raw), 
    new HtmlWebpackPlugin({ 
      inject: true, 
      template: paths.appHtml, 
    }), 
    new BundleAnalyzerPlugin(), 
    new webpack.DefinePlugin(env.stringified), 
    new webpack.HotModuleReplacementPlugin(), 
    new CaseSensitivePathsPlugin(), 
    new webpack.LoaderOptionsPlugin({ 
      debug: true 
    }), 
    new WatchMissingNodeModulesPlugin(paths.appNodeModules) 
  ] 
} 

暂存配置(不起作用)

module.exports = { 
  bail: true, 
  devtool: 'source-map', 
  entry: [ 
    require.resolve('./polyfills'), 
    paths.appIndexJs 
  ], 
  output: { 
    path: paths.appBuildStaging, 
    filename: 'static/js/[name].[chunkhash:8].js', 
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', 
    publicPath: publicPath, 
  }, 
  resolve: { 
    modules: ['node_modules', paths.appNodeModules].concat(paths.nodePaths).concat(paths.appSrc), 
    extensions: ['.ts', '.tsx', '.scss', '.js', '.json', '.jsx'] 
  }, 
  ... 
  plugins: [ 
    new InterpolateHtmlPlugin(env.raw), 
    new HtmlWebpackPlugin({ 
      inject: true, 
      template: paths.appHtml, 
      minify: { 
        removeComments: true, 
        collapseWhitespace: true, 
        removeRedundantAttributes: true, 
        useShortDoctype: true, 
        removeEmptyAttributes: true, 
        removeStyleLinkTypeAttributes: true, 
        keepClosingSlash: true, 
        minifyJS: true, 
        minifyCSS: true, 
        minifyURLs: true, 
      }, 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks: function (module) { 
        // this assumes your vendor imports exist in the node_modules directory 
        return module.context && module.context.indexOf('node_modules') !== -1; 
      } 
    }), 
    //CommonChunksPlugin will now extract all the common modules from vendor and main bundles 
    new webpack.optimize.CommonsChunkPlugin({  
      name: 'manifest' //But since there are no more common modules between them we end up with just the runtime code included in the manifest file 
    }), 
    new BundleAnalyzerPlugin(), 
    new webpack.DefinePlugin(env.stringified), 
    new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
        screw_ie8: true, //. React doesn't support IE8 
        warnings: false, 
        drop_console: false, 
      }, 
      mangle: { 
        screw_ie8: true, 
      }, 
      output: { 
        comments: false, 
        screw_ie8: true, 
      }, 
      sourceMap: true, 
    }), 
    new ExtractTextPlugin({ 
      filename: cssFilename, 
    }), 
    new ManifestPlugin({ 
      fileName: 'asset-manifest.json', 
    }), 
  ] 
} 

错误: React-loadable 吞掉了所有错误(手掌+脸部)，所以我无法从该代码中提供有用的错误。 我的自定义组件会在引导加载程序中抛出错误 bootstrap 6a12c6c…:54 Uncaught (in Promise) TypeError: Cannot read property 'call' of undefined

在我的自定义 HOC 的网络流量中，未加载额外的 bundle 。 在react-loadable的网络流量中，包被加载，但从未被处理。

请您参考如下方法:

经过这么长时间，在升级了 Typescript 和 Webpack 之后，事实证明使用 CommonsChunk 插件不知何故搞砸了。

尚未调查原因，但注释掉以下内容有效:

// new webpack.optimize.CommonsChunkPlugin({ 
//   name: 'vendor', 
//   minChunks: function (module) { 
//     return module.context && module.context.indexOf('node_modules') !== -1; 
//   } 
// }),