前言
提示： 本篇文章使用的是vue-cli5打包
今天小伙伴说，为什么我们项目的打包会打包2次呀？我们打包一次都要120s，2次岂不是double？
我抱着怀疑的态度，说不可能呀，怎么会打包2次？
然后我试了一下，才发现原来是真的。
如图:
可以看到build了2次，并且dist文件夹存在2个相同文件，只是一个多了legacy的名称，并且legacy的包比不带legacy的包会大。
所以，那应该是一次打包带有legacy的，一次打包不带有legacy的。
所以为什么会打包2次？
思索无果，上网查查资料。
正文
现代模式
原来这个是vue的打包机制，它提供了一个模式，叫现代模式，它会打2个包：
- 一个是Babel和polyfill转化后的包，转化后的代码会更长，带有
legacy的名称 - 一个现代包，没有经过babel转化，代码相对少一点
现代包会比转化后的包体积要小一点
打包后的index.html会同时引入这两个文件，现代包的script标签会带有type="module"，转化的包的script标签会有nomodule，支持type="module"的浏览器不会加载nomodule的js文件，反之亦然。
如果你的浏览器支持type="module"的script标签，那么就会加载现代包，不会加载转化的包。
所以不用担心会加载两次。
不需要现代模式
如果我们的项目都是在现代浏览器上运行的（script标签支持module），那么就不需要兼容这种现代模式，只需要打一次包即可，还可以节省时间。(我们打包一次都要120s，至少节省120s)。
node_modules/@vue/cli-service/lib/commands/build/index.js 
可以看到它是判断项目的浏览器目标是否都支持module。如果支持，就直接打包。
项目的目标是通过@babel/helper-compilation-targets这个包，这个包内部使用的是browserslist
node_modules/@babel/helper-compilation-targets/lib/index.js 
最终是根据browserslistrc文件判断项目支持的浏览器目标，如果browserslistrc文件筛选的浏览器目标不是都支持module，就会打包2次。
所以如果不需要现代模式，就要需要修改 .browserslistrc 文件
修改.browserslistrc文件
我们使用的.browserslistrc文件配置
js
> 1%
last 2 versions
not ie <= 8可以去Browserslist网站，把配置粘贴就能筛选符合的目标。
这个筛选的结果会包含ie，它们不支持type="module"的script标签，所以就会打包2次。
所以我们可以把.browserslistrc文件改成
js
> 1%
last 2 versions
not dead这样打包就会打包一次了。
修改打包命令
除了修改.browserslistrc文件，还有另外一种方式，那就是修改打包命令。
github有相关issues，如何关闭现代模式
给打包命令加上--no-module
js
"build": "vue-cli-service build --no-module"这个打包命令就会把所有代码通过babel和polyfills转义，通过普通的script标签 加载（没有module和nomodule）。
总结
以上就是最近遇到vue-cli5打包遇到的问题，可以修改.browserslistrc文件或者修改打包命令方式来解决。
大家根据自己的项目要求来选择哪种方案，欢迎大家评论交流。