使用 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'} />;
}
目前我正在尝试反应可加载（https://github.com/thejameskyle/react-loadable https://github.com/thejameskyle/react-loadable），这个包基本上做同样的事情，但有一些额外的功能。
Problem
这两种方法在本地都可以正常工作，但部署后就不起作用了。 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 的网络流量中，未加载额外的包。
在react-loadable的网络流量中，包被加载，但从未被处理。
