Coder Social home page Coder Social logo

Comments (3)

asfktz avatar asfktz commented on June 4, 2024 4

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

  1. The existence of the .cache directory, as explained before.
  2. 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.

from autodll-webpack-plugin.

cgatian avatar cgatian commented on June 4, 2024

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. 🙏

from autodll-webpack-plugin.

asfktz avatar asfktz commented on June 4, 2024

You're welcome, @cgatian 😊

from autodll-webpack-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.