再说 ant-design-vue 1.7.8 打包优化

在使用 vue-cli4 配置打包优化 提及在vue-cli4项目中，通过 highlight.js，实现了页面中代码高亮显示。但页面打开速度变慢了很多，chunk-vendors.30c0fb60.js有1.2M，页面加载需要耗时5.6s，需要进行打包优化处理。通过使用 cdn 加载、打包压缩等方式，终于把该文件减少到 275KB，首页加载时间减少到不足3s。但该内容已经是三年前的配置，可能由于版本冲突导致配置失败（主要是开发环境与生产环境 VueRouter 冲突的问题），最近通过 HtmlWebpackExternalsPlugin 实现开发环境与生产环境的统一配置如下。

1、package.json 部分内容，主要是 compression-webpack-plugin、html-webpack-externals-plugin 及 prerender-spa-plugin 版本：

  "dependencies": {
    "ant-design-vue": "1.7.8",
    "axios": "^1.3.4",
    "core-js": "^3.29.0",
    "highlight.js": "^11.7.0",
    "vue": "2.7.14",
    "vue-meta-info": "^0.1.7",
    "vue-router": "3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-plugin-import": "^1.13.0",
    "compression-webpack-plugin": "^3.0.1",
    "html-webpack-externals-plugin": "^3.8.0",
    "prerender-spa-plugin": "^3.4.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

2、vue.config.js 部分内容，主要是通过 HtmlWebpackExternalsPlugin 生成 cdn 链接，index.html 无需要手动引入：

const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");

module.exports = {
  productionSourceMap: false, // 生产环境的 source map
  // CSS 相关选项
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
    extract: true,

    // 是否开启 CSS source map？
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时，使用 `{ sass: { ... } }`。
    loaderOptions: {},
  },

  configureWebpack: {
    plugins: [
      ...[
        new HtmlWebpackExternalsPlugin({
          externals: [
            {
              module: "vue",
              entry: "//lib.baomitu.com/vue/2.6.12/vue.min.js",
              global: "Vue",
            },
            {
              module: "vue-router",
              entry: "//cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js",
              global: "VueRouter",
            },
            {
              module: "axios",
              entry: "//cdn.bootcss.com/axios/0.19.0/axios.min.js",
              global: "axios",
            },
            {
              module: "highlight.js",
              entry: "//cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js",
              global: "hljs",
            },
          ],
        }),
      ],

      ...(process.env.NODE_ENV === "production"
        ? [
            new PrerenderSPAPlugin({
              // 生成文件的路径，也可以与webpakc打包的一致。
              // 下面这句话非常重要！！！
              // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
              staticDir: path.join(__dirname, "dist"),
              // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
              routes: ["/", "/post/id"],
              // 这个很重要，如果没有配置这段，也不会进行预编译
              renderer: new Renderer({
                inject: {
                  foo: "bar",
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: "render-event",
              }),
            }),

            new CompressionWebpackPlugin({
              filename: "[path].gz[query]",
              algorithm: "gzip",
              test: new RegExp(
                "\\.(" + productionGzipExtensions.join("|") + ")$"
              ),
              threshold: 10240,
              minRatio: 0.8,
            }),
          ]
        : []),
    ],
  },

  chainWebpack: (config) => {
    // 移除 prefetch 插件
    config.plugins.delete("prefetch");
    // 移除 preload 插件
    config.plugins.delete("preload");
  },

  devServer: {
    publicPath: process.env.NODE_ENV === "development" ? "/" : "./",
    proxy: {
      "/api": {
        target: "http://127.0.0.1:9090",
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};