前言

提示：本篇文章使用的是vue-cli5打包

今天小伙伴说，为什么我们项目的打包会打包2次呀？我们打包一次都要120s，2次岂不是double？

我抱着怀疑的态度，说不可能呀，怎么会打包2次？

然后我试了一下，才发现原来是真的。

如图:

可以看到build了2次，并且dist文件夹存在2个相同文件，只是一个多了legacy的名称，并且legacy的包比不带legacy的包会大。

所以，那应该是一次打包带有legacy的，一次打包不带有legacy的。

所以为什么会打包2次？

思索无果，上网查查资料。

正文

原来这个是vue的打包机制，它提供了一个模式，叫现代模式，它会打2个包：

现代包会比转化后的包体积要小一点

打包后的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文件配置

js 复制代码

> 1%
last 2 versions
not ie <= 8

可以去Browserslist网站，把配置粘贴就能筛选符合的目标。

这个筛选的结果会包含ie，它们不支持type="module"的script标签，所以就会打包2次。

所以我们可以把.browserslistrc文件改成

js 复制代码

> 1%
last 2 versions
not dead

这样打包就会打包一次了。

除了修改.browserslistrc文件，还有另外一种方式，那就是修改打包命令。

给打包命令加上--no-module

js 复制代码

"build": "vue-cli-service build --no-module"

这个打包命令就会把所有代码通过babel和polyfills转义，通过普通的script标签 加载（没有module和nomodule）。

以上就是最近遇到vue-cli5打包遇到的问题，可以修改.browserslistrc文件或者修改打包命令方式来解决。

大家根据自己的项目要求来选择哪种方案，欢迎大家评论交流。