Work on plugins to remove unnecessary JS chunks

Author: thecrypticace

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch via NPM",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "debug"],
+      "port": 9229
+    }
+  ]
+}

build/Array.js

@@ -0,0 +1,19 @@
+Array.prototype.rejectInPlace = function(callback) {
+  return this.filterInPlace((...args) => {
+    return !callback(...args);
+  });
+};
+
+Array.prototype.filterInPlace = function(callback) {
+  let i = 0,
+    j = 0;
+
+  while (i < this.length) {
+    const val = this[i];
+    if (callback(val, i, this)) this[j++] = val;
+    i++;
+  }
+
+  this.length = j;
+  return this;
+};

build/RemoveStyleScriptChunksPlugin.js

@@ -0,0 +1,53 @@
+require("./Array");
+
+const pluginName = "RemoveStyleScriptChunksPlugin";
+
+module.exports = class RemoveStyleScriptChunksPlugin {
+  hasCSSChunks(results) {
+    return results.some(r => {
+      return r.identifier.includes("mini-css-extract-plugin");
+    });
+  }
+
+  isJavascriptChunk(result) {
+    return result.pathOptions.contentHashType === "javascript";
+  }
+
+  removeExtraChunksInPlace(results) {
+    if (!this.hasCSSChunks(results)) {
+      return;
+    }
+
+    results.rejectInPlace(this.isJavascriptChunk);
+  }
+
+  listenForAssets(template) {
+    template.hooks.renderManifest.tap(
+      pluginName,
+      this.removeExtraChunksInPlace.bind(this)
+    );
+  }
+
+  listenForEntires(template) {
+    template.hooks.startup.tap(pluginName, (source, chunk, hash) => {
+      if (chunk.hasEntryModule()) {
+        for (const chunkGroup of chunk.groupsIterable) {
+          if (chunkGroup.chunks.length > 1) {
+            console.log(chunkGroup, chunk);
+          }
+        }
+      }
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // We can't register the tap until beforeChunkAssets
+      // If we register it before then it won't be last
+      compilation.hooks.beforeChunkAssets.tap(pluginName, () => {
+        [compilation.mainTemplate].forEach(this.listenForEntires.bind(this));
+        [compilation.chunkTemplate].forEach(this.listenForAssets.bind(this));
+      });
+    });
+  }
+};

build/index.js

@@ -0,0 +1 @@
+module.exports.RemoveStyleScriptChunksPlugin = require("./RemoveStyleScriptChunksPlugin");

package.json

@@ -4,7 +4,8 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "test": "node ./node_modules/.bin/webpack --progress --display verbose"
+    "test": "node ./node_modules/.bin/webpack --progress --display verbose",
+    "debug": "node --inspect-brk ./node_modules/.bin/webpack --progress --display verbose"
   },
   "dependencies": {
     "css-loader": "^0.28.11",

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 const webpack = require("webpack");
 const { VueLoaderPlugin } = require("vue-loader");
+const { RemoveStyleScriptChunksPlugin } = require("./build");
 
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 module.exports = {
@@ -54,6 +55,8 @@ module.exports = {
       filename: "[name].css",
       chunkFilename: "[name].css"
     }),
+
+    new RemoveStyleScriptChunksPlugin()
   ],
 
   optimization: {
@@ -69,7 +72,7 @@ module.exports = {
           // enforce: false
           // results in no vue-styles chunk
           // Only a bundle.css file
-          enforce: false
+          enforce: true
         },
 
         extractOtherStyles: {
@@ -82,7 +85,7 @@ module.exports = {
           // Only a bundle.css file
           name: "other-styles",
           chunks: "all",
-          enforce: false
+          enforce: true
         }
       }
     }