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

2019-07-30 10:48:35 +08:00
 waiaan

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 文件(且分割代码),需如何配置?

谢谢!

5392 次点击
所在节点    Vue.js
2 条回复
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
非常感谢。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/587408

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX