这次构建虽然成功了（Build complete），但出现了 5 个警告。这些警告主要分为两类：代码引用错误和性能优化建议。

如果不处理，项目虽然能跑，但可能会导致运行时报错（找不到方法）以及首屏加载速度变慢。

以下是针对这 5 个警告的详细修复方案：

🛠️ 问题 1：API 引用错误（2 个警告）

警告内容：

• "export 'postMessage' (imported as 'msgApi') was not found in '@/api/message.js'
• "export 'titleController' was not found in '@/utils/titleController'

原因分析： 你在 .vue 文件中尝试引入了 postMessage 和 titleController，但对应的文件（@/api/message.js 和 @/utils/titleController）中**并没有导出（export）**这两个名字。

解决方案： 请检查这两个文件的导出方式：

1. 检查拼写：确认文件中导出的变量名是否和你引入的完全一致（大小写敏感）。
2. 检查导出语法：
   • 如果文件中使用的是 export default function...，你应该直接引入默认值：import msgApi from '@/api/message.js'（不加大括号）。
   • 如果文件中使用的是 export function postMessage...（命名导出），你才需要使用 import { postMessage } from ...（加大括号）。

⚡ 问题 2：包体积过大与性能优化（3 个警告）

警告内容：

• asset size limit: 资源超过推荐大小 (244 KiB)，特指 chunk-vendors.js (340 KiB)。
• entrypoint size limit: 入口文件总大小超标 (396 KiB)。
• webpack performance recommendations: 建议使用 import() 懒加载来分割代码。

原因分析： 你的第三方依赖库（如 Vue, Axios, UI 框架等）被打包进了 chunk-vendors.js，体积达到了 340KB。这会导致用户首次打开网页时加载时间过长。

解决方案： 根据 Webpack 代码分割指南，推荐以下几种优化方式：

1. 路由懒加载 (最推荐)

不要在路由配置中直接引入组件，而是使用 import() 动态导入。这样每个页面的代码会被打包成独立的 chunk，只有访问该页面时才加载。

修改前：

import Detail from '@/views/Blog/Detail.vue'
const routes = [
  { path: '/detail', component: Detail }
]

修改后：

const routes = [
  { 
    path: '/detail', 
    component: () => import('@/views/Blog/Detail.vue') // 动态导入
  }
]

2. 第三方库按需引入

如果你引入了像 ElementUI、AntD 或者 Lodash 这样的大型库，不要直接引入整个库。

• Lodash: 使用 lodash-es 配合按需引入，或者只引入需要的方法 import { debounce } from 'lodash'。
• UI 框架: 务必配置按需加载插件（如 babel-plugin-component），只引入你用到的组件（如 Button, Table），而不是整个 UI 库。

3. 外部化依赖 (Externals)

如果某些库（如 Vue, jQuery）你打算通过 CDN 引入，可以在 vue.config.js 中配置 externals，让 Webpack 不打包它们。

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter'
      // 这样打包时会忽略 Vue，你需要在 index.html 里用 script 标签引入 CDN
    }
  }
}

📈 构建结果概览

总结建议： 请优先修复 API 引用错误，否则运行时可能会报错；然后通过 路由懒加载 和 UI 库按需引入 来解决包体积过大的问题。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2301_81452897/article/details/160900844