第一个问题，不用很在意大小，超了也没什么关系。如果还要细分 vendors，可以考虑把占用空间较大的 module 提取出来，例如 ui kit。

第二个问题，一个可行的方案：

* VueCLI 3 默认 build 会生成：`chunk-vendors`, `chunk-common` 和 `{pagename}`，如果要分离每个 page 的代码，你需要将其手动加入到你的 pages object 中：


```
pages: {
maker: {
entry: 'src/pages/maker/maker.js',
template: 'public/maker.html',
filename: 'maker.html',
chunks: ['chunk-common', 'chunk-maker-vendors', 'maker']
},
view: {
entry: 'src/pages/view/view.js',
template: 'public/view.html',
filename: 'view.html',
chunks: ['chunk-common', 'chunk-view-vendors', 'view']
},
login: {
entry: 'src/pages/login/login.js',
template: 'public/login.html',
filename: 'login.html',
chunks: ['chunk-common', 'chunk-login-vendors', 'login']
}
}
```

之后，在 `module.exports` 中配置 `chainWebpack`：

```
chainWebpack: config => {
const IS_VENDOR = /[\\/]node_modules[\\/]/
config.optimization.splitChunks({
cacheGroups: {
maker: {
name: `chunk-maker-vendors`,
priority: -11,
chunks: chunk => chunk.name === 'maker',
test: IS_VENDOR,
enforce: true,
},
view: {
name: `chunk-view-vendors`,
priority: -11,
chunks: chunk => chunk.name === 'view',
test: IS_VENDOR,
enforce: true,
},
login: {
name: `chunk-login-vendors`,
priority: -11,
chunks: chunk => chunk.name === 'login',
test: IS_VENDOR,
enforce: true,
},
common: {
name: 'chunk-common',
priority: -20,
chunks: 'initial',
minChunks: 2,
reuseExistingChunk: true,
enforce: true,
}
}
})
}
```

如果回复不支持 markdown，代码格式就没办法了，将就看。