DllPlugin optimizes webpack packaging to make the package bigger.

I use DllPlugin to optimize packaging. The packaged dll.js files include 810kb and vendor.js 264kb , and the time is only 3 seconds faster

.


DllPluginvendor.js513kb

element-uiDllPlugin

npm run build / building for production

webpack.dll.conf.js is as follows:

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

module.exports = {
  entry: {
    vendor: [
        "vue",
        "vue-router",
        "vuex",
        "axios",
        "element-ui",
        "qs",
        "signalr"
    ]
    // polyfill:["core-js/fn/promise","whatwg-fetch"]
  },
  output: {
    path: path.join(__dirname, "../static/dll"),
    filename: "[name].dll.js",
    library: "[name]_library",
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({ // uglifjs
        compress: {
            warnings: false
        }
    }),
    new webpack.DllPlugin({
      path: path.join(__dirname, "dll", "[name]-manifest.json"),
      name: "[name]_library", // output.library
      context: __dirname
    })
  ]
};
Mar.23,2022

those who load element-ui on demand should not be put in dll, because this is only a package of npm packages, and it does not perform demand loading. There are usually some fixed and infrequently modified npm packages in dll

.
Menu