vue-cli 中 CommonsChunkPlugin中如此配置是什么用意?

cjwj
  • 628

vue-cli 中 webpack.prod.conf.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

我清楚这是在使用代码拆分功能时,将一个 chunk 的多个子 chunk 的公共的依赖抽离成异步加载的公共代码块,但我不确定name: 'app'async: 'vendor-async'配置具体是什么作用?与我不设置name选项,设置async: true有什么区别?

回复
阅读 3.8k
2 个回答

看文档 https://doc.webpack-china.org...
将名为'app'的chunk的子模块中,如果有3个或3个以上的模块都用了某一个模块X,那么将X作为common-chunk提出来,找出n个X合成一个包。在这里,这个包是异步的,叫'vendor-async'

1.减少因业务代码变动导致的频繁更新cdn
2.在代码分离的时候,先下载这个公共包,后续其它包的下载就比较小了
举个例子:有四个代码分离的页面分别依赖是,{a,b,c,d} {a,c,e} {a,b,f} {b,c,g}
提取common-chunk =>{a,b,c}
各个页面的依赖就变成 {d},{e},{f},{g}

将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存,因为在项目维护过程中,第三方依赖不经常变化,而业务代码会经常变化。详细介绍https://doc.webpack-china.org...

刚刚仔细看了文档,对上面的说法进行一下补充:

new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
}),

上面这个代码肯定是分离的我们的业务代码,
也就是vue-cli打包出来的app.js是我们的业务代码,
然后这里面可能会有异步模块
异步模块肯定就不会放在我们首屏加载的app.js里面
比如,a和b都是异步模块,但是这两个异步模块中有一个公共模块c
如果打包的时候把c分别都打包进a和b
那么就造成重复打包了。。。

所以

  async: 'vendor-async',
  children: true,

这两个行就起作用了。

当你设置children为true,共同引用的模块就会被打包合并到名为vendor-async的公共模块,当你懒加载a或者b的时候并行加载这个vendor-async公共模块。

个人的理解,有问题请指正~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏