vue.config.js 中的 pages 如下:
pages: {
maker: {
entry: 'src/pages/maker/maker.js',
template: 'public/maker.html',
filename: 'maker.html'
},
view: {
entry: 'src/pages/view/view.js',
template: 'public/view.html',
filename: 'view.html'
},
login: {
entry: 'src/pages/login/login.js',
template: 'public/login.html',
filename: 'login.html'
}
}
三个页面互相独立不影响,但都在一个项目里。打包后生成的 js 文件如下:
dist\js\chunk-vendors.b03a24ab.js 2853.68 KiB 838.60 KiB
dist\js\chunk-d5f92168.ec610990.js 2124.45 KiB 637.19 KiB
dist\js\maker.c5308f56.js 271.34 KiB 47.67 KiB
dist\js\chunk-common.a7b29839.js 13.36 KiB 4.30 KiB
dist\js\login.5e7632f4.js 6.74 KiB 3.43 KiB
求问如下:
1、如何配置让打包后的 js 文件小于 2m ;
2、假如要分开打包,即每个页面都是单独的 js 文件(且分割代码),需如何配置?
谢谢!
1
mrcotter2013 2019-07-30 15:03:41 +08:00
第一个问题,不用很在意大小,超了也没什么关系。如果还要细分 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,代码格式就没办法了,将就看。 |
2
waiaan OP @mrcotter2013
非常感谢。 |