Vue CLI: Bundle common dependency for async web components only once

user_9709414 0
Viewed 347

I'm generating multiple (20+) async web components with Vue from a single repository with Vue CLI's target wc-async:

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

I have a "utils.js" that is imported into all of the web components. Looking at the report generated by Vue CLI, the utils.js (plus all imports in the utils.js) are bundled with every web component, so I have 20+ times some kilobytes overhead, which I'd put into the "entry" bundle (openeo.js). Is there a way to achieve this? For Vue there's the --inline-vue flag in the CLI, but it's not clear how to handle other dependencies in the same way.

I've looked through the Vue + WebPack documentation, even in the code itself where the entry-wc.js is generated, but couldn't find an entry point or a setting that is not somehow overridden by Vue CLI.

tl;dr: How to put common files across multiple async web components with Vue (CLI) into the entry file of the package?

custom-component vue-cli web-component vue.js webpack
1 Answers

You can try adding this to vue.config.js but it might not be enough for your use case:

  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('@', '')}`;
            },
          },
        },
      },
    };
}
user_59628020
Related