vue2 项目升级到vue3之后npm run build执行两遍打包

vue2 项目升级到vue3之后npm run build执行两遍打包

实际是在 @vue/cli-service升级到5.0版本之后出现的问题

先说解决方法

两种办法

1. 执行 build 的时候加一个 --no-module

vue-cli-service build --no-module

2. 修改 browserslist，一般在 package.json 中或者单独的 .browserslistrc 文件中，添加一个 not ie 11

package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
 ]

.browserslistrc

> 1%
last 2 versions
not dead
not ie 11

分析原因

通过执行 npm run build 的时候打印的日志可以发现两次打包之前都输出了不一样的日志

Building legacy bundle for production...

Building module bundle for production...

正常只执行一次的打包只会输出一种日志

Building for production...

然后我们根据日志输出的关键字在 @vue/cli-service 项目中查找一下，我们执行的是 build 命令，所以先看这个命令的文件 @vue/cli-service/lib/commands/build/index.js，搜索一下关键字 legacy bundle 会查找到第 116 行

if (args.target === 'app') {
   
    const bundleTag = args.needsDifferentialLoading
      ? args.moduleBuild
        ? `module bundle `
        : `legacy bundle `
      : ``
    logWithSpinner(`Building ${
     bundleTag}for ${
     mode}...`)
  }

发现当 args.needsDifferentialLoading 为 true 的时候就会出现打包两次所出现的日志，所以基本可以肯定问题出在这个上，继续找一下它的复制，往上查找，在67行发现了赋值语句

args.needsDifferentialLoading = needsDifferentialLoading

继续查找 needsDifferentialLoading 变量声明和赋值的地方，往上看就可以看到

const {
    allProjectTargetsSupportModule } = require('../../util/targets')
let needsDifferentialLoading = args.target === 'app' && args.module
if (allProjectTargetsSupportModule) {
   
  log(
    `All browser targets in the browserslist configuration have supported ES module.\n` +
    `Therefore we don't build two separate bundles for differential loading.\n`
  )
  needsDifferentialLoading = false
}

needsDifferentialLoading 初始值如果 args.module 是 false 的话就是 false

在正常的项目开发中 arr.target 的值一定是 app，如果开发的是插件的话，那么一般在打包的时候会指定 --target lib

还有就是如果 allProjectTargetsSupportModule 这个值是true的话， needsDifferentialLoading 会被手动赋值成 false ，于是我们发现了两个可以让 needsDifferentialLoading 是 false 的方法

–no-module的原理

先查找 args.module 的复制，会发现没有直接的赋值，args是整个回调函数的参数，而且在下面还给 args中没有的部分值，附上了默认参数，第23行

api.registerCommand('build'