使用vue.esm-bundler.js时如何在生产模式下加载Vue3？

一、先搞懂官方文档那句话的意思 #

vue.esm-bundler.js 是专门给打包工具（比如Webpack）设计的Vue构建版本，里面包含大量基于process.env.NODE_ENV判断的代码分支：

• 当NODE_ENV为development时，会保留开发友好的功能：比如组件渲染的警告提示、Vue DevTools支持、调试用的代码注释等。
• 当NODE_ENV为production时，这些调试相关的代码会被剔除，只保留核心运行逻辑，以此压缩包体积、提升运行性能。

官方所说的“保留带有process.env.NODE_ENV判断的生产/开发分支（需由打包工具替换）”，核心意思是：这个构建版本不会自行处理process.env.NODE_ENV的值，而是把替换这个变量的工作交给Webpack。Webpack会在打包时将代码中的process.env.NODE_ENV替换为你指定的环境值，随后通过tree-shaking（摇树优化）自动删除当前环境不需要的代码分支。

二、Webpack配置生产模式的具体步骤 #

1. 设置mode选项（基础优化开关） #

Webpack的mode选项会自动帮你完成环境相关的默认优化：

• 设置为production时，Webpack会自动开启代码压缩、tree-shaking、作用域提升等生产环境专属优化。
• 设置为development时，会保留源代码映射、关闭压缩，方便本地调试。

在你的Webpack配置文件中补充该选项：

const path = require('path');

module.exports = {
  mode: 'production', // 开发环境可改为 'development'
  resolve: {
    alias: {
      esmvue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
    }
  },
  // 其他配置项...
}

2. 用DefinePlugin注入环境变量（关键步骤） #

仅设置mode还不够，必须通过Webpack自带的DefinePlugin将process.env.NODE_ENV替换为具体的字符串值，这样Vue代码中的分支判断才能被正确识别并剔除。

在配置文件中添加该插件：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  mode: 'production',
  resolve: {
    alias: {
      esmvue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
    })
  ],
  // 其他配置项...
}

3. 通过npm脚本快速切换环境 #

为了更便捷地在开发/生产模式间切换，建议在package.json中添加对应的脚本命令：

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

• 运行npm run dev：启动开发服务器，以开发模式构建项目，保留所有调试功能。
• 运行npm run build：以生产模式构建项目，输出体积更小、性能更优的打包文件。

三、验证配置是否生效 #

打包完成后可以通过两种方式验证：

1. 查看输出的JS文件体积：生产模式下的文件体积会比开发模式小很多，且不会包含Vue的调试警告相关代码。
2. 在项目代码中添加console.log(process.env.NODE_ENV)，运行对应命令后查看控制台输出，确认环境值是否正确。

内容的提问来源于stack exchange，提问作者Luca Reghellin