webpack build后生成的app、vendor、manifest三者有何职能不一样？

贴一下以前vue脚手架的webpack3配置：

app.js是入口js，vendor则是经过提取公共模块插件来提取的代码块（webpack自己带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要常常变更的部分，好比关于异步加载js模块部分的内容。

从截图上看也看出，vendor的文件大小最大，由于其包含了vue整一个框架的代码，以及webpack的模块化代码。

至于manifest的话，主要是一些异步加载的实现方法（经过创建script方式动态引入js），内容上包含异步js的文件名和路径

1，CommonsChunkPlugin 抽取的是公共部分而不是"常常变更的部分";

2，观察了一下，webpack应该是会在最后一个CommonsChunkPlugin产出的chunk注入webpackJsonp的定义,以及异步加载相关的定义,而就是这个会涉及到全部entry及chunk的md5,因此会"常常变更"，同时vue-cli默认的vendor是打包node_module下的全部依赖，会很大，在生产环境，过大的文件要尽可能利用缓存来加快载入速度，但“常常变更”不利于缓存，因此为了将entry(这里可认为是app.js)的变更隔离在vendor以外，vue-cli在vendor以后多作了一个manifest的chunk,这样entry只要不引入新的node_modules里的包就不会影响到vendor了.

ps:因此其实跟编译次数没什么关系,全部文件每次打包都会再编译一次的,重点是大文件，缓存，变更代码的拆分.

如下说明仅依照vue-cli全家桶默认配置解读，若有错误，请指出：

app.js：基本就是你实际编写的那个app.vue(.vue或.js?),没这个页面跑不起来.

vendor.js:vue-cli全家桶默认配置里面这个chunk就是将全部从node_modules/里require(import)的依赖都打包到这里，因此这个就是全部node_modules/下的被require(import)的js文件

manifest.js: 最后一个chunk，被注入了webpackJsonp的定义及异步加载相关的定义(webpack调用CommonsChunkPlugin处理后模块管理的核心,由于是核心,因此要第一个进行加载,否则会报错).

精简:

因为默认的vendor的打包策略致使这个chunk很大,按照默认配置这基本没什么好精简了,要精简的话基本要针对项目实际来修改各个chunk的打包策略(尽可能减小包的大小来提速首屏加载)

优化:

单页面基本就跟精简同个道理吧,多页面的话感受仍是自定义一下vendor的打包策略,毕竟不必定全部页面都会用到全量的第三方依赖，适当减小vendor的体积能提升很多加载速度.

mark： webpack.optimize.CommonsChunkPlugin 在webpack3已经被弃用，webpack4须要使用新的配置 config.optimization.splitChunks