【记一次令人头疼的vue多页面分包问题】

Tomorrow_BigBang

已于 2022-02-21 17:47:12 修改

阅读量1.4k

点赞数

文章标签： vue.js javascript webpack

于 2022-02-21 17:44:22 首次发布

本文链接：https://blog.csdn.net/suckshit/article/details/122897416

版权

在Vue CLI项目中，配置webpack的splitChunks.maxSize选项时遇到了一个奇怪的问题：当设置maxSize时，build后的HTML文件缺少引用某些JS文件的script标签，导致页面空白。移除maxSize后，页面能正常加载。这可能是由于maxSize限制导致的动态引入资源处理异常。

摘要由CSDN通过智能技术生成

@vue/cli-service v4 webpack splitchunks.maxsize 会导致build出来的页面空白

记一次令人头疼的vue多页面分包问题！直接给出分包配置。

记一次令人头疼的vue多页面分包问题！直接给出分包配置。

webpack相关配置

下面的splitchunks.maxsize会导致build出来的html文件中，没有<script>标签来引用生成的bound.js，打开页面显示空白;去掉maxSize重新build后，能正常显示页面内容。

// config.build.js
optimization: {
        splitChunks: {
          chunks: "all", // initial(初始块)、async(按需加载块)、all(默认，全部块)
          minSize: 30000, // 提取出的新chunk在两次压缩(打包压缩和服务器压缩)之前要大于30kb
          maxSize: 480000,
          cacheGroups: {
            vuetify: {
              test(module) {
                let path = module.resource;
                if (!path) return false;
                path = path.replace(/\\/g, "/");
                return path && /node_modules\/vuetify\//.test(path);
              },
              name: "chunk-vuetify",
              priority: 18,
              // enforce: true,
            },
            vendors: {
              test(module) {
                let path = module.resource;
                if (!path) return true;
                path = path.replace(/\\/g, "/");
                let isNeed = path && /node_modules/.test(path);
                return isNeed;
              },
              name: "chunk-vendors",
              priority: 3,
              chunks: "initial",
              // enforce: true,
            },
            common: {
              name: "chunk-common",
              minChunks: 2,
              minSize: 30000,
              reuseExistingChunk: true,
            },
          },
        },
      },

使用maxsize build出来的文件展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
    <title>xxxxx软件</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
    />
    <link href="/assets/css/chunk-291204bc.164fd56a.css" rel="prefetch" />
    <link href="/assets/css/chunk-62b6f152.0e8e9fce.css" rel="prefetch" />
    <link href="/assets/js/chunk-291204bc.8cf041f3.js" rel="prefetch" />
    <link href="/assets/js/chunk-2d0c1d17.3ed860d9.js" rel="prefetch" />
    <link href="/assets/js/chunk-62b6f152.4e81a6c5.js" rel="prefetch" />
    <link
      href="/assets/css/chunk-vendors~4a7e9e0b.8e7dcc04.css"
      rel="preload"
      as="style"
    />
    <link
      href="/assets/css/chunk-vendors~6cfee264.439cd68a.css"
      rel="preload"
      as="style"
    />
    <link
      href="/assets/js/chunk-vendors~205977d4.d4cd2456.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vendors~4a7e9e0b.badc1293.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vendors~6cfee264.e182f281.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vendors~d0ae3f07.ea8755aa.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vendors~fdc6512a.0d2995df.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vuetify~dde583c9.346afa57.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/index~3364b0b4.08b2434b.js"
      rel="preload"
      as="script"
    />
  </head>
  <body>
    <noscript
      ><strong
        >We're sorry but xxxx软件 doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
  </body>
</html>

可以看到上面没有script标签来引用index~3364b0b4.08b2434b.js文件

将maxsize注释掉之后的build出来的html文件展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
    <title>xxxx软件</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css"
    />
    <link href="/assets/css/chunk-291204bc.164fd56a.css" rel="prefetch" />
    <link href="/assets/css/chunk-62b6f152.0e8e9fce.css" rel="prefetch" />
    <link href="/assets/js/chunk-291204bc.4a26b278.js" rel="prefetch" />
    <link href="/assets/js/chunk-2d0c1d17.9a71d556.js" rel="prefetch" />
    <link href="/assets/js/chunk-62b6f152.2e1a35d7.js" rel="prefetch" />
    <link
      href="/assets/css/chunk-vendors.1e003fbe.css"
      rel="preload"
      as="style"
    />
    <link
      href="/assets/js/chunk-vendors.d3815cfd.js"
      rel="preload"
      as="script"
    />
    <link
      href="/assets/js/chunk-vuetify.7efe71f6.js"
      rel="preload"
      as="script"
    />
    <link href="/assets/js/index.bb23f5d6.js" rel="preload" as="script" />
    <link href="/assets/css/chunk-vendors.1e003fbe.css" rel="stylesheet" />
  </head>
  <body>
    <noscript
      ><strong
        >We're sorry but xxxx软件 doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      ></noscript
    >
    <div id="app"></div>
    <script src="/assets/js/chunk-vendors.d3815cfd.js"></script>
    <script src="/assets/js/index.bb23f5d6.js"></script>
  </body>
</html>

将maxsize去掉之后页面能成功加载。不知道这是为啥，求懂哥支援。

Tomorrow_BigBang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
【记一次令人头疼的vue多页面分包问题】

@vue/cli-service v4 webpack splitchunks.maxsize 会导致build出来的页面空白记一次令人头疼的问题！不知道是不是我的配置有问题。webpack相关配置使用*maxsize* build出来的文件展示可以看到上面没有*script*标签来引用*index~3364b0b4.08b2434b.js*文件将*maxsize*注释掉之后的build出来的html文件展示记一次令人头疼的问题！不知道是不是我的配置有问题。webpack相关配置下面的splitchu
复制链接

扫一扫