How could I split dependencies in chunks?

[sneko]

Hi @simskij ,

I'm struggling with making your template working with chunking files.

It works great when each output script embeds everything (its own imports) in its final .js file, but it makes my computer rewriting each time this full file for nothing (because only my k6 scenario changes, not imported dependencies).

The idea has been to add:

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/,
        // cacheGroupKey here is `commons` as the key of the cacheGroup
        name(module, chunks, cacheGroupKey) {
          return `${cacheGroupKey}`;
        },
        chunks: 'all'
      }
    }
  }
},

So dependencies are in their own final .js file and are imported by the scenario files (test1.js and test2.js in your example). But... I get this error:

ReferenceError: window is not defined at file:///Users/XXXXXXXXX/dist/test2.js:144:28(64)

Indeed this line will break:

var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];

It seems to be necessary to append dependencies...

since we are not in a real browser when executing the scenario... I tried multiple possibilities but never succeed. Setting target=node is not working also to prevent compiling dependencies with browser stuff.

Do you know a workaround so I can chunk common files while being able to import them?

Thank you,

[simskij]

@sneko Interesting! I had not really considered the benefits of chunking a k6 test to prevent rewrites of the dependencies. I'll have a look and get back to you. Would you mind disclosing a couple of the modules you are using so that I'll be able to recreate your circumstances?

[efstathiosntonas]

Any news in this one? I use graphql-request and it throws ReferenceError: window is not defined which comes from: /node_modules/graphql-request/dist/createRequestBody.js

edit: the issue seems to be coming from form-data that it's being used by graphql-request, I've just patched it to work on SSR environment and the error went away. What I did was:

1. install form-data as a dev dependency and added a resolutions: { "form-data": "4.0.0"} on package.json (yarn)
2. patched it with patch-package, these are the changes

this is the patch file:
form-data+4.0.0.patch

diff --git a/node_modules/form-data/lib/browser.js b/node_modules/form-data/lib/browser.js
index 09e7c70..0f2c8e4 100644
--- a/node_modules/form-data/lib/browser.js
+++ b/node_modules/form-data/lib/browser.js
@@ -1,2 +1,2 @@
 /* eslint-env browser */
-module.exports = typeof self == 'object' ? self.FormData : window.FormData;
+module.exports = typeof self == 'object' ? self.FormData : typeof window !='undefined' ? window.FormData : undefined;

[evkostadinov]

@simskij my setup with webpack config is

mode: 'production',
target: 'node',
...
  optimization: {
    minimize: true,
    splitChunks: {
      cacheGroups: {
        graphql: {
          test: /[\\/]dependencies[\\/]/,
          name: 'dependencies',
          chunks: 'all',
        }
      }
    }
  },

this should output the dependencies as a separate file in dist