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

    • 2023-03-05 10:04
    • 字数 2,898
    • 阅读 1,098

    使用 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": "",
            },
          },
        },
      },
    };
    
    
back_to_top