Webpack SplitChunksPlugin跳过块名称中的数字-ReactJS
我正在使用Webpack4.41.2来打包我的项目,使用它只拆分Webpack SplitChunksPlugin跳过块名称中的数字-ReactJS,reactjs,webpack-4,Reactjs,Webpack 4,我正在使用Webpack4.41.2来打包我的项目,使用它只拆分lazy()加载的组件。 我最近在整理我的项目时注意到一种奇怪的新行为。输出文件的名称如下-序列号中有一个间隙。这以前从未发生过,我的网页配置和版本也没有改变,但代码已经改变了 Version: webpack 4.41.2 Time: 69423ms Built at: 2020-09-21 11:06:17 Asset Size Chunks
lazy()
加载的组件。
我最近在整理我的项目时注意到一种奇怪的新行为。输出文件的名称如下-序列号中有一个间隙。这以前从未发生过,我的网页配置和版本也没有改变,但代码已经改变了
Version: webpack 4.41.2
Time: 69423ms
Built at: 2020-09-21 11:06:17
Asset Size Chunks Chunk Names
0.bundle.js 20.6 KiB 0 [emitted]
2.bundle.js 23.5 KiB 2 [emitted]
3.bundle.js 7.1 KiB 3 [emitted]
4.bundle.js 7.59 KiB 4 [emitted]
5.bundle.js 8.34 KiB 5 [emitted]
6.bundle.js 47.7 KiB 6 [emitted]
main.bundle.js 1.81 MiB 1 [emitted] [big] main
main.bundle.js.LICENSE 3.95 KiB [emitted]
main.bundle.js.map 91 bytes 1 [emitted] [dev] main
main.css 106 KiB 1 [emitted] main
main.css.map 136 KiB 1 [emitted] [dev] main
请注意,上述序列中缺少1.bundle.js
文件
我的SplitChunksPlugin配置如下
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 6,
maxInitialRequests: 4,
automaticNameDelimiter: '~',
automaticNameMaxLength: 30,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
我的代码在我的AppRouter
组件中使用lazy()
import OnePage from '../components/OnePage'
const TwoPage = lazy(() => import('../components/TwoPage'))
const ThreePage = lazy(() => import('../components/ThreePage'))
const FourPage = lazy(() => import('../components/four/FourPage'))
import Test from '../components/four/Test'
...
const FivePage = lazy(() => import('../components/five/FivePage'))
...
我查看了bundle.js文件,发现
3.bundle - contains ThreePage
4.bundle - contains TwoPage
5.bundle - contains FivePage
6.bundle - contains FourPage
0.bundle - contains shared code??
2.bundle - contains shared code??
就我所见,所有的代码都包含在内了
为什么1.bundle.js
不是由webpack生成的?
亲切问候/K