Configuration for SSR environments

[swernerx]

Thanks for the hard work on this plugin. Very much appreciated. I always like the idea of the DLLPlugin but it was generally a hassle to set-up.

Right now I am trying to bring the plugin together with SSR (universal rendering) in my React application framework. I was wondering if there is anything special I have to pass to the plugin config as I would assume there will be different vendor bundles for client and server.

Right now my plugin init code looks like this:

      new AutoDllPlugin({
        filename: "[name].[chunkhash].js",
        context: ROOT,
        debug: true,
        inject: isProduction && isClient,
        entry: {
          vendor: [
            isServer ? SERVER_VENDOR : CLIENT_VENDOR
          ]
        }
      }) : null,

As you mentioned that context is important, I was wondering if there needs to be an additional setting for something like target as server and client code is not able to share the same compiled DLL bundle.

[swernerx]

I am trying to add it to the edge stack... which means to its built tool: https://github.com/sebastian-software/edge-builder

[asfktz]

Hi @swernerx, Thanks for sharing this with me, I always curious to know about advanced use cases for the plugin.

If I understood correctly, you wish to have 2 different bundles, one for the server and one for the client

What are the results that you're getting with the current setup?

There are two important things to note here:

If you wish to have 2 different bundles, you can specify that in the entry option, the same way you'll do with webpack's own entry:

entry: {
  serverVendor: SERVER_VENDOR,
  clientVendor: CLIENT_VENDOR
}

Second, I believe that you encountered an issue with cache invalidation, where the client/server invalidates each other unnecessarily.

One of the conditions for the plugin to invalidate its cache is if the config you pass to it has changed.

So in your case:

new AutoDllPlugin({
  filename: "[name].[chunkhash].js",
  context: ROOT,
  debug: true,
  inject: isProduction && isClient,
  entry: {
    serverVendor: SERVER_VENDOR,
    clientVendor: CLIENT_VENDOR
  }
})

For the client, it will be:

new AutoDllPlugin({
  ...
  inject: true // <--
  entry: {
    serverVendor: SERVER_VENDOR,
    clientVendor: CLIENT_VENDOR
  }
})

For the server, it will be:

new AutoDllPlugin({
  ...
  inject: false // <--
  entry: {
    serverVendor: SERVER_VENDOR,
    clientVendor: CLIENT_VENDOR
  }
})

That will trigger unnecessary invalidation because the plugins config is different.

I realize now that changing inject or debug should not trigger invalidation. I will change it.

For now, know that you can use multiple instances:

[
  new AutoDllPlugin({
    filename: "[name].[chunkhash].js",
    context: ROOT,
    debug: true,
    inject: isProduction,
    entry: {
      clientVendor: CLIENT_VENDOR
    }
  }),
  new AutoDllPlugin({
    filename: "[name].[chunkhash].js",
    context: ROOT,
    debug: true,
    inject: isProduction,
    entry: {
      serverVendor: SERVER_VENDOR
    }
  })
]

By the way, I would love to hear your feedback about this feature idea: https://github.com/asfktz/autodll-webpack-plugin/issues/37#issuecomment-316189637 Can you spot any flaws in the design?

Have a great day, Asaf