Vue CLI：只为异步 Web 组件捆绑公共依赖项一次

Question

我正在使用 Vue 从单个存储库中使用 Vue CLI 的目标 wc-async 生成多个（20 多个）异步 Web 组件：

vue-cli-service build --report --target wc-async --inline-vue --name openeo \"./components/*.vue\"

我有一个“utils.js”，它被导入到所有 Web 组件中。查看 Vue CLI 生成的报告，utils.js（加上 utils.js 中的所有导入）与每个 Web 组件捆绑在一起，所以我有 20 多倍的千字节开销，我将其放入“条目”捆绑包（openeo.js）。有没有办法做到这一点？对于 Vue，CLI 中有 --inline-vue 标志，但不清楚如何以相同方式处理其他依赖项。

我查看了 Vue + WebPack 文档，甚至在代码本身中 entry-wc.js is generated 的位置，但找不到入口点或未被 Vue CLI 以某种方式覆盖的设置。

tl;dr：如何使用 Vue (CLI) 将跨多个异步 Web 组件的通用文件放入包的入口文件中？

Answer 1

您可以尝试将其添加到 vue.config.js，但这可能不足以满足您的用例：

  configureWebpack: (config) => {
    config.optimization = {
      runtimeChunk: 'single',
      moduleIds: 'hashed',
      splitChunks:
      {
        automaticNameDelimiter: '_',
        chunks: 'all',
        maxInitialRequests: 5,
        minSize: 5000,
        //maxSize: 250000,
        cacheGroups:
        {
          default:
          {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true,
            },
          vendor:
          {
            reuseExistingChunk: true,
            test: /[\\/]node_modules[\\/]/,
            name(module)
            {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/]([^\\/]+)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `vendor_${packageName.replace('@', '')}`;
            },
          },
        },
      },
    };
}