用于代码拆分的Webpack配置不适用于生产版本 [英] Webpack config for Code splitting not working for production build

问题描述

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

Building a ReactJS application with Webpack. Recently interested in using code splitting to reduce app size.

我尝试实现包装System.import（）的自定义HOC：

I've tried implementing a custom HOC that wrapped System.import():

/* 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 ），该软件包实际上具有相同的功能，但

Currently I'm trying react-loadable (https://github.com/thejameskyle/react-loadable), a package that does essentially the same thing but with some extra bells n whistles.

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

Both methods work fine locally, but do not work when deployed. Webpack configurations are derived from React-Starter-App, from early March 2017. My gut tells me that the webpack config is the source of the problem, but I'm not sure how to debug this.

/* 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)
  ]
}

登台配置（不起作用）

Staging Config (not working)

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-可加载项吞噬了所有错误（手掌+面部），因此我无法从该代码中提供有用的错误。
我的自定义组件会在引导加载程序 bootstrap 6a12c6c…：54中引发错误（未承诺）TypeError：无法读取未定义的属性 call

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

In the network traffic for my custom HOC, the extra bundle is not loaded. In the network traffic for react-loadable, the bundle is loaded, but it is never processed.

推荐答案

因此毕竟，在升级了Typescript和Webpack之后，事实证明，使用CommonsChunk插件正在以某种方式对其进行破坏。

So after all this time, after upgrading Typescript and Webpack, it turns out that using the CommonsChunk plugin was screwing it up somehow.

尚未调查原因，但将其注释掉了。以下工作：

Have not yet investigated why, but commenting out the following worked:

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

这篇关于用于代码拆分的Webpack配置不适用于生产版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！