Vue组件库打包：component-normalizer作用及提取方法咨询

我正在尝试把Vue组件打包成多个共享库，基于vue-cli的webpack模板写了Demo，加了这样的多入口webpack配置：

...
output: {
  path: config.lib.assetsRoot,
  filename: utils.assetsLibPath('[name].min.js'),
  library: '[name]',
  libraryTarget: 'umd'
},
externals: {
  vue: 'vue',
  vuex: 'vuex',
  axios: 'axios'
},
...

但构建结果里始终包含vue-loader添加的component-normalizer.js，想请教两个问题：

1. 这个文件在lib包中的作用是什么？
2. 怎么把它提取出来？

Hey，刚好我之前打包Vue组件库的时候也遇到过这个问题，来给你详细说说：

一、component-normalizer.js到底是干啥的？ #

这玩意儿是vue-loader自动给你塞进去的组件标准化工具，说白了就是帮Vue「统一组件格式」的幕后助手，核心做这几件事：

• 格式统一：不管你是用.vue单文件组件、直接写JS对象定义组件，还是用其他奇奇怪怪的方式写组件，它都会把这些不同格式的代码转换成Vue实例能直接识别的标准结构
• 选项合并：帮你把自定义的组件选项和Vue的默认选项做合并处理，避免组件初始化时出现参数不规范的问题
• 版本兼容：抹平不同Vue版本之间组件API的细微差异，让你的组件在目标版本范围内都能正常跑起来
• 异步处理：如果你的组件用到了异步加载逻辑，它也会参与到异步组件加载后的标准化工作中

简单说，没有它的话，你的组件可能因为写法或者版本问题，没法被Vue正确实例化，它就是个默默干活的工具人。

二、怎么把它单独提取出来？ #

因为这是多个组件都会用到的公共代码，咱们可以用webpack的SplitChunksPlugin来把它抽成单独的文件，具体配置这么加：

1. 配置webpack的optimization字段 #

在你的webpack配置里找到（或者新增）optimization部分，添加splitChunks规则：

optimization: {
  splitChunks: {
    cacheGroups: {
      // 专门匹配component-normalizer.js，提取成公共文件
      vueComponentUtils: {
        test: /component-normalizer\.js$/,
        name: 'vue-component-utils',
        chunks: 'all',
        enforce: true // 强制提取，不管文件大小
      }
    }
  }
}

这样配置后，webpack会把所有组件chunk里的component-normalizer.js单独打包成一个vue-component-utils.min.js文件（对应你output里的filename规则）。

2. 几个要注意的点 #

• 提取之后，你的每个组件库文件都会依赖这个公共工具文件，所以在使用组件库的时候，得确保这个公共文件先被加载
• 如果是做第三方组件库，记得在文档里说明需要引入这个公共文件，或者把它作为peer依赖的一部分
• 其实这个文件体积很小（也就几KB），如果你的组件库不需要极致拆分，也可以不用提取，对整体打包大小影响不大

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