我正在尝试将我的React应用程序分成更多的块,以提高性能。我决定将代码拆分为不同的路径,我应该看到home〜chunk,search〜chunk,ecc ...,但是当我将应用程序编译到 / build / js 文件夹中时,我无法看到新的捆绑包。我实际上是以这种方式使用webpack 神奇的评论:
const promise = await import(/* webpackMode: "lazy" */ /* webpackChunkName: "SearchbarToggle" */ `../../../src/js/modules/${this.props.scene}`);
我也将拆分的webpack.client.js留了下来:
const config = {
target: "web",
watchOptions: {
poll: true
},
devtool: !PRODUCTION ? 'cheap-module-source-map' : false,
entry: {},
resolve: {
extensions: ['.js', '.jsx', '.scss', '.css']
},
output: {
filename: '[name].min.js',
chunkFilename: `[name].min.js`,
path: path.join(__dirname, buildPath, 'js'),
publicPath: '/js/'
},
module: {
rules: moduleRules
},
node: {
//Enable "console" only when PRODUCTION is false, otherwise it will trigger this bug:
//https://github.com/webpack/webpack/issues/1019 (that is, the "util" package will be parsed twice
//and the browser will show this error: "b.inherits is not a function")
console: !PRODUCTION,
fs:
'empty',
net:
'empty',
tls:
'empty',
child_process:
'empty'
}
};
babel能否打破与其他插件的任何冲突导致的数据块?我将babel.rc配置留在这里:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current",
"browsers": [
">0.25%",
"ie>10"
]
}
}
],
[
"@babel/preset-react",
{
"targets": {
"node": "current",
"browsers": [
">0.25%",
"ie>10"
]
}
}
]
],
"plugins": [
[
"@babel/plugin-syntax-async-generators"
],
[
"@babel/plugin-proposal-object-rest-spread"
],
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties"
],
[
"@babel/plugin-proposal-export-default-from"
],
[
"@babel/plugin-transform-regenerator"
],
[
"@babel/plugin-proposal-do-expressions"
],
[
"@babel/plugin-proposal-optional-chaining"
]
]
}