Webpack代码分割后构建出现Preload错误，VueCLI应用无法运行

问题背景 #

我尝试通过代码分割优化Vue CLI项目的包体积，重点处理体积超500KB的lottie-web包，但配置后构建出的dist目录应用无法正常运行：

• 控制台抛出预加载错误：

  The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
  

• 页面无内容加载，移除vue.config.js中的Webpack配置后应用恢复正常，但包体积大幅增加。

相关配置与代码 #

vue.config.js配置

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Home'
    }
  },
  chainWebpack: config => {
    config.plugins.delete('prefetch');
  },
  configureWebpack: {
    optimization: {
      minimize: true,
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
            priority: -20
          },
        }
      }
    }
  }
};

路由懒加载代码

const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

构建终端输出截图

问题原因与修复方案 #

核心原因 #

配置的splitChunks.maxSize会强制将vendor包拆分为多个小chunk，但Vue CLI默认的preload插件（仅删除了prefetch，未处理preload）会错误地为这些拆分出的非首屏chunk添加预加载标签，导致资源未被及时使用触发浏览器错误，同时可能阻塞关键资源加载。另外，splitChunks.name: 'vendor'配合maxSize生成的chunk命名，会让preload逻辑无法正确识别加载时机。

修复步骤 #

1. 调整splitChunks配置，精准拆分依赖
   针对lottie-web单独拆分，而非对整个vendor包强制按大小拆分，既优化体积又避免预加载错误：

   configureWebpack: {
     optimization: {
       minimize: true,
       splitChunks: {
         minSize: 10000,
         // 移除maxSize，避免强制拆分vendor包
         cacheGroups: {
           vendors: {
             test: /[\\/]node_modules[\\/]/,
             name: 'vendor',
             chunks: 'initial', // 仅拆分首屏必需依赖
             priority: -20
           },
           // 单独拆分lottie-web
           lottie: {
             test: /[\\/]node_modules[\\/](lottie-web)[\\/]/,
             name: 'chunk-lottie',
             chunks: 'async', // 仅拆分异步引入的lottie-web
             priority: 10, // 优先级高于vendors
             enforce: true
           }
         }
       }
     }
   }
   

2. 处理preload插件（可选）
   若不需要预加载功能，可直接移除preload插件，彻底避免错误的预加载标签：

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

3. 确保lottie-web异步引入
   在使用lottie-web的组件中，采用动态import而非静态引入：

   // 错误写法
   // import lottie from 'lottie-web'
   
   // 正确写法
   const loadLottie = async () => {
     const lottie = await import('lottie-web');
     // 初始化lottie动画逻辑
   }
   

验证 #

修改配置后重新构建，检查dist目录的chunk结构，确认chunk-lottie.js被单独拆分，控制台无预加载错误，页面正常加载，同时包体积得到有效优化。

内容的提问来源于stack exchange，提问作者Marcus Harting