webpack打包后的文件

Posted 2020-10-16

参考vue脚手架的webpack配置，做一个项目后，会发现产出目录经常有app.js, vendor.js，manifest.js，*.js.gz， *.js.map生成。

因为第三方引用模块代码通常很大，而且在不引入新的模块之前基本上是不会变动的，所以我们需要将业务代码和第三方引用模块代码分开打包，并利用浏览器的缓存去提高应用程序的首屏加载速度。

一、app.js

程序入口文件打包压缩了。

二、vendor.js

通过提取公共模块插件来提取的代码块，vendor.js最大，因为其包含了vue整个框架的代码，以及webpack的模块化代码，node_modules。

三、manifest.js

manifest是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。

四、*.js.gz

gz文件，压缩文件，实现按需加载。

五、 *.js.map

map文件，映射文件，方便调试。