👷CLI Delete prefetch preload of lazy load module

buildAppJSPlugin.js

@@ -8,24 +8,27 @@ const cdn = {
 
 class BuildAppJSPlugin {
   apply(compiler) {
-    // emit 是异步 hook，使用 tapAsync 触及它，还可以使用 tapPromise/tap(同步)
     compiler.hooks.emit.tapAsync(
       "BuildAppJSPlugin",
       (compilation, callback) => {
+        const isProd = process.env.NODE_ENV === "production"
         let cssarr = [];
         let jsarr = [];
-        // 遍历所有编译过的资源文件，
+        let reg = "";
-        // 对于每个文件名称，都添加一行内容。
+        if (isProd) {
+          reg = "(app|chunk-vendors)\\.";
+        }
+        // 遍历所有编译过的资源文件
         for (let filename in compilation.assets) {
-          if (filename.match(".*\\.js$")) {
+          if (filename.match(reg + ".*\\.js$")) {
-            if (process.env.NODE_ENV === "production") {
+            if (isProd) {
               filename = (process.env.VUE_APP_CDN_PATH || "/") + filename;
             } else {
               filename = "/" + filename;
             }
             jsarr.push(filename);
           }
-          if (filename.match(".*\\.css$")) {
+          if (filename.match(reg + ".*\\.css$")) {
             cssarr.push(filename);
           }
         }
@@ -33,7 +36,7 @@ class BuildAppJSPlugin {
           return a.indexOf("app.");
         });
         var cdnjs = "";
-        if (process.env.NODE_ENV === "production") {
+        if (isProd) {
           cssarr = cdn.css.concat(cssarr);
           cdnjs = `var cdnjs = ${JSON.stringify(cdn.js)};
           cdnjs.forEach((item) => {

package-lock.json

@@ -9207,6 +9207,18 @@
         "find-up": "^2.1.0"
       }
     },
+    "plyr": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npm.taobao.org/plyr/download/plyr-3.6.2.tgz",
+      "integrity": "sha1-WlW2CKzRYSYt4cx1yoQ6pkNVoFE=",
+      "requires": {
+        "core-js": "^3.6.5",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.8"
+      }
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npm.taobao.org/pnp-webpack-plugin/download/pnp-webpack-plugin-1.6.4.tgz",

vue.config.js

@@ -2,6 +2,7 @@ const path = require("path");
 const cdnDependencies = require("./dependencies-cdn");
 const BuildAppJSPlugin = require("./buildAppJSPlugin");
 const CompressionWebpackPlugin = require("compression-webpack-plugin");
+const { set } = require("lodash");
 
 function resolve(dir) {
   return path.join(__dirname, dir);
@@ -67,18 +68,27 @@ module.exports = {
     /**
      * 添加 CDN 参数到 htmlWebpackPlugin 配置中
      */
-    config.plugin("html").tap((args) => {
+    config.plugin("html").tap((options) => {
       if (isProd) {
-        args[0].cdn = cdn;
+        set(options, "[0].cdn", cdn);
       } else {
-        args[0].cdn = {
+        set(options, "[0].cdn", {
           js: cdnDependencies.filter((e) => e.name === "").map((e) => e.js),
           css: cdnDependencies.filter((e) => e.name === "").map((e) => e.css),
-        };
-      }
-      args[0].inject = false;
-      return args;
         });
+      }
+      set(options, "[0].inject", false);
+      return options;
+    });
+    /**
+     * 删除懒加载模块的 prefetch preload，降低带宽压力
+     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch
+     * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
+     * 而且预渲染时生成的 prefetch 标签是 modern 版本的，低版本浏览器是不需要的
+     */
+    if (isProd) {
+      config.plugins.delete("prefetch").delete("preload");
+    }
     // 解决 cli3 热更新失效 https://github.com/vuejs/vue-cli/issues/1559
     config.resolve.symlinks(true);
     config.resolve.alias