diff --git a/buildAppJSPlugin.js b/buildAppJSPlugin.js index c758509..e55d4cf 100644 --- a/buildAppJSPlugin.js +++ b/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 (process.env.NODE_ENV === "production") { + if (filename.match(reg + ".*\\.js$")) { + 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) => { diff --git a/package-lock.json b/package-lock.json index 5ebbf99..1c18f7f 100644 --- a/package-lock.json +++ b/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", diff --git a/vue.config.js b/vue.config.js index b070e47..5846e32 100644 --- a/vue.config.js +++ b/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