用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录文件问题做准备。

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

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

一、分析出口文件bundle.js代码

1、main.js没有依赖

简单在main.js写一个函数,然后打包main.js,生成bundle.js文件。

2、main.js有依赖,js

用js写一个main.js和depend.js,在main.js中引入depend.js,即main.js依赖depend.js,然后打包main.js,生成bundle.js文件。

3、main.js有依赖,es2015

用es6语法写一个main.js和depend.js,在main.js中引入depend.js,即main.js依赖depend.js,然后打包main.js,生成bundle.js文件。

二、产出目录之js文件夹

1、app.js

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

2、vendor.js

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

3、manifest.js

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

4、*.js.gz

gz文件,gzip压缩文件。

5、 *.js.map

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