Investigate usage of DllPlugin for faster build time

[stof]

I just discovered https://github.com/asfktz/autodll-webpack-plugin which is a higher level API aimed at simplifying their usage.

[weaverryan]

I'm certainly interested in someone checking this out. I investigated it briefly (DllPlugin, not the auto - hadn't seen that yet) awhile ago, and I believe I decided to save it for later (i.e. there was no real big issue with it).

[claytron5000]

What would the user interface look like for this function? Would the user have to configure a list of dependency entries they'd want to cache?

.dynamicLinkedLibraries(['react', 'react-router'])

[stephanvierkant]

Important note from their readme: "Now, that webpack 5 planning to support caching out-of-the-box, AutoDllPlugin will soon be obsolete."

So the question is when Encore supports Webpack 5.

[stof]

So the question is when Encore supports Webpack 5.

See the WIP PR at #645

[claytron5000]

I support the idea that we can wait for the built-in cache in webpack 5 instead of building first-class handling, however I wonder if I can get some help configuring DLL using encore as is.

webpack.config.js

Encore
.splitEntryChunks()
.addPlugin(new webpack.DllReferencePlugin({
    context: '.',
    manifest: require('./testbuild/vendor-manifest.json'),
  }));

Encore.addEntry('vendor', './testbuild/vendor.bundle.js');

webpack.vendor.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
      react: ['react'],
    },
    output: {
      filename: 'vendor.bundle.js',
      path: path.resolve(__dirname, 'testbuild'),
      library: 'vendor_lib',
    },
    plugins: [new webpack.DllPlugin({
      name: 'vendor_lib',
      path: 'testbuild/vendor-manifest.json',
      format: true
    })]
  };

I run the vendor config once to create the intermediate file, then the main config file. That results in some vendor files and app files. I include the files in the base template

        {% block javascripts %}
            {{ encore_entry_script_tags('vendor') }}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}

The code is delivered to the browser, but the Dll function isn't available to the app and throws an Uncaught ReferenceError: vendor_lib is not defined. (vendor_lib being the name passed into the DllPlugin.

[claytron5000]

Never mind, I had to add context.

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: {
      react: ['react', 'react-dom', '@material-ui/core', '@material-ui/icons', '@material-ui/lab'],
    },
    output: {
      filename: 'vendor.bundle.js',
      path: path.resolve(__dirname, 'testbuild'),
      library: 'vendor_lib',
    },
    plugins: [new webpack.DllPlugin({
      name: 'vendor_lib',
      path: 'testbuild/vendor-manifest.json',
      context: path.resolve(__dirname, "path", "to", "app"),
      format: true
    })]
  };

[ankurk91]

https://github.com/webpack/changelog-v5/blob/master/guides/persistent-caching.md

I would suggest to go for disk cache.

[stof]

Closing this as it is not relevant anymore for webpack 5