使用自定义webpack打包Vue 3组合式API项目时输出包体积过大

• 配置Vue运行时别名
  Vue3默认引入的构建包包含runtime+compiler两部分，使用vue-loader编译SFC的场景下，模板已经在构建阶段转换为render函数，无需运行时携带编译器，在webpack.config.js的resolve节点下新增alias配置：

resolve: {
  extensions: [".ts", ".tsx", ".js", ".vue"],
  alias: {
    // 指向仅含运行时的Vue构建包
    'vue$': 'vue/dist/vue.runtime.esm-bundler.js'
  }
}

• 注入Vue构建常量
  需要通过DefinePlugin注入全局常量，关闭不需要的特性以触发tree-shaking：
  首先引入webpack的DefinePlugin：

const { DefinePlugin } = require("webpack");

然后在plugins节点新增配置：

plugins: [
  new VueLoaderPlugin(),
  new DefinePlugin({
    // 未使用Options API可设为false，减少体积
    __VUE_OPTIONS_API__: JSON.stringify(false),
    // 生产环境关闭devtools
    __VUE_PROD_DEVTOOLS__: JSON.stringify(false)
  })
]

• 配置外部依赖（组件库场景适用）
  从输出配置看当前项目是打包为UMD组件库，可将Vue标记为外部依赖，不打入最终产物，由依赖该库的上层项目自行引入Vue：
  在webpack.config.js根节点新增externals配置：

externals: {
  vue: {
    root: 'Vue',
    commonjs: 'vue',
    commonjs2: 'vue',
    amd: 'vue'
  }
}

• 其他可优化项
  1. 修正webpack配置中mode的拼写错误：原配置中developent拼写错误，正确应为development
  2. 不要在业务代码中使用template属性声明运行时模板，该场景必须依赖编译器，会导致体积膨胀

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