vue-cli 3.0 打包生成chunk文件的作用是什么

Question

使用vue-cli3.0打包vue后，生成的dist目录下的css和js都会有chunk开头形式的文件，请问这种chunk文件的作用是什么，chunk-vendors和普通的chunk文件区别又是什么?

Answer 1

在使用 Vue CLI 3.0 进行打包时，会生成一些以 chunk 开头的文件。这些文件在 Webpack 的代码分割功能下被划分为独立的代码块（chunks），其目的是将应用程序的代码分割成更小的部分，以实现更好的性能优化。

chunk-vendors 是 Vue CLI 3.0 默认的代码分割策略。它将所有引用的第三方库和依赖项打包到一个 chunk-vendors 文件中，这个文件名可以在 vue.config.js 中配置。这个文件通常会比其他的 chunk 文件大，因为第三方库通常是比较庞大的，并且不经常更改。

而普通的 chunk 文件则是应用程序代码被拆分出来的部分。每个 chunk 文件都有一个唯一的名称（通常是一个 hash 值），可以通过这个名称来标识它。这些 chunk 文件包含了由 Vue 组件和其他程序代码组成的应用程序的一部分，这些代码可以被分开加载，以便提高页面的性能。

总之，chunk 文件的作用是将大的代码文件分割成更小的部分，以便提高应用程序的性能。chunk-vendors 文件是将所有第三方库和依赖项打包进一个文件中，而普通的 chunk 文件则是应用程序代码的独立部分。