webpack的chunks和bundle是什么意思?

大伯格
  • 371

1.图中的chunks是什么意思?
2.为什么有些chunks有chunk names有的没有?
3.那些数字代表什么?
4.emitted是什么意思
5.chunk和bundle之间是什么关系?
6.为什么我的build记录没有下图官方指南中红框部分?那个红框部分是什么?我是用vue-cli构建的项目

回复
阅读 10.1k
4 个回答
厦冰
  • 8.5k

1.chunks就是代码块的意思,有name的chunk是在entry里配置了name的,那些1,2,3,4啥的应该是用了code splitting配置生成的,数字是chunk的id
2.多个chunk合在一起就是bundle,一个bundle可以理解为一个大的js打包之后生成的文件,而多个bundle里可能有公共的部分,或者一个bundle里的东西并不需要一次性加载,需要按照路由按需加载,这个时候就需要按需加载,拆分成不同的chunk
3.你的和官方的不一致,可能是因为你没有用到code splitting

个人理解,如有错误,还望指出

chunk 半成品,需要继续加工
bundle 成品

toBeTheLight
  • 16.6k

其他的不太清楚,6的话在vue-cli的build.js中

process.stdout.write(stats.toString({
  colors: true,
  modules: false,
  children: false,
  chunks: true,// 这个改为true就有了
  chunkModules: false
}) + '\n\n')

应该是打包过程中要构建的文件的信息。

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