请教一个 vue cli 3.0 打包代码分割的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 1944 天前的主题，其中的信息可能已经有所发展或是发生改变。

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 文件（且分割代码），需如何配置？

谢谢！

kib

dist

Pages

2 条回复 • 2019-07-30 16:07:08 +08:00

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，代码格式就没办法了，将就看。

waiaan

2019-07-30 16:07:08 +08:00

@mrcotter2013
非常感谢。