Comparison to webpack-dll-bundles-plugin #24

cgatian · 2017-07-05T23:56:38Z

What does this plugin do that webpack-dll-bundles-plugin doesn't?

Looking at the two plugins, they are very similar.

asfktz · 2017-07-07T10:18:05Z

Great question, @cgatian

To be honest, I wasn't aware of webpack-dll-bundle-plugin when I wrote this one.

AutoDLL started as a humble PR for adding DLL support in create-react-app (CRA).
I intended to do so without adding more complexity to project.

That PR went over many iterations before I realized one day that the best way to do so is to encapsulate the entire logic into a Plugin. After doing so, I noticed there's nothing specific to CRA about it anymore and that other projects can benefit from it too.
So I extracted AutoDLL into its own repo.

Key differences

First, I must say that I have very little experience with webpack-dll-bundles-plugin,
So please correct me if you find any mistake in my notes.

Cache dir

DllBundles asks you to specify its cache directory, which is also its output folder.
It is where it stores both the DLLs and its invalidation logic (the dll-bundles-state.json file).

AutoDLL hides that away from you and uses find-cache-dir to stores its cache inside node_modules/.cache

That has the benefit of automaticity invalidating the cache every time npm install, remove, or update in called since the .cache dir gets delete when you use one of those.

Webpack's dev-server support

DllBundles seems to create the DLLs in your project also when you use the dev-server.

One of webpack's dev-server features is that it stores the assets in the memory instead for faster access, and allows you to access them as if the were just regular files.

AutoDLL respects that and when the devServer is used, the DLLs are added to the memory as well.

Filename templates

Seems like DllBundles doesn't allow to change the DLL's filename, and to get it you have to use an external API like so:

  new AddAssetHtmlPlugin([
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
    { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
  ])

AutoDLL handles it differently.
First, you can use any valid webpack filename template, by using the filename option:

new AutoDllPlugin({
      path: './dll',
      filename: '[name].dll.js'
      entry: {
        vendor: [ ... ]
      },
      ...
    })

Then in the HTML you can use:

<script src="/dll/vendor.dll.js"></script>

You might also want to use a filename template like so: [name]_[hash].js,
and since the hash part is unpredictable, you have to inject the DLL bundle's path into the HTML dynamically.

That's why AutoDLL recommends using the HtmlPlugin
And by specifying inject: true, AutoDLL will inject the bundle's path for you

plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './src/index.html',
    }),
    new AutoDllPlugin({
      inject: true, // ⟸
      context: __dirname,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
        vendor: [
          'react',
          'react-dom',
          'moment'
        ]
      }
    })
  ]

Will result in

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="/dll/vendor.dll.js"></script>
  <script src="/main.bundle.js"></script>
</body>
</html>

Invalidation

If I understood correctly, DllBundles checks the contents of each module's package.json

AutoDLL currently have to two conditions for invalidation

The existence of the .cache directory, as explained before.
If the current settings passed into the plugin are different from last time.

There's also a very exciting PR on the way, which will allow any change to be detected.

For examples, you'll be able to add conosle.log in node_modules/angular
and it will trigger a build on next run.

Test

Currently, I don't see tests in DllBundles.

AutoDLL designed to be testable from the ground up, I believe it's essential for the project's stability.

Documantaion

Although it's still much a WIP, I believe in having great documentation with many examples and FAQ.
I intend AutoDLL to the have that.

cgatian · 2017-07-07T12:34:07Z

Wow, thank you @asfktz for the in depth comparison!

I look forward to integrating this into our project, once some of the bumps are cleaned up. Thank you again. 🙏

asfktz · 2017-07-07T14:37:42Z

You're welcome, @cgatian 😊

asfktz added the question label Jul 7, 2017

cgatian closed this as completed Jul 7, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comparison to webpack-dll-bundles-plugin #24

Comparison to webpack-dll-bundles-plugin #24

cgatian commented Jul 5, 2017 •

edited

Loading

asfktz commented Jul 7, 2017 •

edited

Loading

cgatian commented Jul 7, 2017

asfktz commented Jul 7, 2017

Comparison to webpack-dll-bundles-plugin #24

Comparison to webpack-dll-bundles-plugin #24

Comments

cgatian commented Jul 5, 2017 • edited Loading

asfktz commented Jul 7, 2017 • edited Loading

Key differences

Cache dir

Webpack's dev-server support

Filename templates

Invalidation

Test

Documantaion

cgatian commented Jul 7, 2017

asfktz commented Jul 7, 2017

cgatian commented Jul 5, 2017 •

edited

Loading

asfktz commented Jul 7, 2017 •

edited

Loading