asfktz / autodll-webpack-plugin

Webpack's DllPlugin without the boilerplate
MIT License
1.46k stars 80 forks source link

multiple dll packages are generated, it will cause duplicate references #137

Open beilo opened 5 years ago

beilo commented 5 years ago

I am using the autodll-webpack-plugin procedure and found that if multiple dll packages are generated, it will cause duplicate references.

image.png

    // file: webpack.dll.conf.js
  entry: {
    vendor_react: ["react", "react-dom"],
    vendor_third_party: [
      "axios",
      "moment",
      "mobx",
      "mobx-react",
      "react-router-dom",
      "rxjs"
    ]
  },
  // optimization: {
  //   splitChunks: {
  //     chunks: "all",
  //   }
  // },

After analyzing with webpack-bundle-analyzer, it was found that react-dom was repeated, as shown below:

image.png

chunks:all

image.png

    // file: webpack.dll.conf.js
  entry: {
    vendor_react: ["react", "react-dom"],
    vendor_third_party: [
      "axios",
      "moment",
      "mobx",
      "mobx-react",
      "react-router-dom",
      "rxjs"
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    }
  },

After analysis, there is only one react-dom, as shown below:

image.png

Use AutoDllPlugin to get the following result:

    // webpack.common.js
    new AutoDllPlugin({
      inject: true, // will inject the DLL bundles to index.html
      debug: false,
      context: __dirname,
      filename: "[name]_[hash:6].js",
      path: "./dll",
      entry: {
        vendor: ["react", "react-dom"],
        vendor_libs: [
          "axios",
          "moment",
          "mobx",
          "mobx-react",
          "react-router-dom",
          "rxjs"
        ]
      }
    }),

image.png

Ps1:

  1. I can't analyze the generated dll file using webpack-bundle-analyzer
  2. The generated vendor_libs is similar in size to the chunks:all package, and even larger.

Ps2:

  1. Isn't my approach wrong, dll does not actually need to distinguish between multiple packages
  2. I tried to handle dll myself, but after chunk:all, an exception will occur, making it unusable.

Can you answer my doubts? Thank you.

g8up commented 4 years ago

This article may answer you: http://www.programmersought.com/article/1319630786/

beilo commented 4 years ago

@g8up Thank you very much for your answer. The method of this article is correct

But we hope that autodll webpack plugin can provide this function

Or is it correct to generate only one DLL?