@vue/cli-service v4 webpack splitchunks.maxsize 会导致build出来的页面空白
记一次令人头疼的vue多页面分包问题！直接给出分包配置。
webpack相关配置
下面的splitchunks.maxsize会导致build出来的html文件中，没有<script>标签来引用生成的bound.js，打开页面显示空白;去掉maxSize重新build后，能正常显示页面内容。
// config.build.js
optimization: {
splitChunks: {
chunks: "all", // initial(初始块)、async(按需加载块)、all(默认，全部块)
minSize: 30000, // 提取出的新chunk在两次压缩(打包压缩和服务器压缩)之前要大于30kb
maxSize: 480000,
cacheGroups: {
vuetify: {
test(module) {
let path = module.resource;
if (!path) return false;
path = path.replace(/\\/g, "/");
return path && /node_modules\/vuetify\//.test(path);
},
name: "chunk-vuetify",
priority: 18,
// enforce: true,
},
vendors: {
test(module) {
let path = module.resource;
if (!path) return true;
path = path.replace(/\\/g, "/");
let isNeed = path && /node_modules/.test(path);
return isNeed;
},
name: "chunk-vendors",
priority: 3,
chunks: "initial",
// enforce: true,
},
common: {
name: "chunk-common",
minChunks: 2,
minSize: 30000,
reuseExistingChunk: true,
},
},
},
},
使用maxsize build出来的文件展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<title>xxxxx软件</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
/>
<link href="/assets/css/chunk-291204bc.164fd56a.css" rel="prefetch" />
<link href="/assets/css/chunk-62b6f152.0e8e9fce.css" rel="prefetch" />
<link href="/assets/js/chunk-291204bc.8cf041f3.js" rel="prefetch" />
<link href="/assets/js/chunk-2d0c1d17.3ed860d9.js" rel="prefetch" />
<link href="/assets/js/chunk-62b6f152.4e81a6c5.js" rel="prefetch" />
<link
href="/assets/css/chunk-vendors~4a7e9e0b.8e7dcc04.css"
rel="preload"
as="style"
/>
<link
href="/assets/css/chunk-vendors~6cfee264.439cd68a.css"
rel="preload"
as="style"
/>
<link
href="/assets/js/chunk-vendors~205977d4.d4cd2456.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vendors~4a7e9e0b.badc1293.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vendors~6cfee264.e182f281.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vendors~d0ae3f07.ea8755aa.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vendors~fdc6512a.0d2995df.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vuetify~dde583c9.346afa57.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/index~3364b0b4.08b2434b.js"
rel="preload"
as="script"
/>
</head>
<body>
<noscript
><strong
>We're sorry but xxxx软件 doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
></noscript
>
<div id="app"></div>
</body>
</html>
可以看到上面没有script标签来引用index~3364b0b4.08b2434b.js文件
将maxsize注释掉之后的build出来的html文件展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<title>xxxx软件</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
/>
<link href="/assets/css/chunk-291204bc.164fd56a.css" rel="prefetch" />
<link href="/assets/css/chunk-62b6f152.0e8e9fce.css" rel="prefetch" />
<link href="/assets/js/chunk-291204bc.4a26b278.js" rel="prefetch" />
<link href="/assets/js/chunk-2d0c1d17.9a71d556.js" rel="prefetch" />
<link href="/assets/js/chunk-62b6f152.2e1a35d7.js" rel="prefetch" />
<link
href="/assets/css/chunk-vendors.1e003fbe.css"
rel="preload"
as="style"
/>
<link
href="/assets/js/chunk-vendors.d3815cfd.js"
rel="preload"
as="script"
/>
<link
href="/assets/js/chunk-vuetify.7efe71f6.js"
rel="preload"
as="script"
/>
<link href="/assets/js/index.bb23f5d6.js" rel="preload" as="script" />
<link href="/assets/css/chunk-vendors.1e003fbe.css" rel="stylesheet" />
</head>
<body>
<noscript
><strong
>We're sorry but xxxx软件 doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
></noscript
>
<div id="app"></div>
<script src="/assets/js/chunk-vendors.d3815cfd.js"></script>
<script src="/assets/js/index.bb23f5d6.js"></script>
</body>
</html>