Vue CLI 3 打包优化：路由懒加载与异步组件

"关于vue-cli 3配置打包优化要点，主要涉及路由懒加载、异步组件、代码压缩、引用别名、SCSS配置文件优化、减少HTTP请求等关键点，旨在提升Vue应用的性能和加载速度。" Vue CLI 3 是 Vue.js 的官方构建工具，提供了快速设置和自定义构建流程的能力。在开发大型应用时，优化配置至关重要，以下是对给定文件中提及的几个关键优化点的详细解释： 1. **路由懒加载**： 路由懒加载是提高应用初始加载速度的关键策略。通过将路由对应的组件定义为异步加载，只有当用户实际访问该路由时，才会加载相应的组件代码。在提供的代码中，封装了一个名为 `AsyncComponentHook` 的函数，它接收一个路径参数，动态导入对应的 Vue 组件，并利用 webpack 的 `import()` 语法来实现懒加载。`webpackChunkName` 内联注释用于指定打包后的 chunk 名称，有利于后续的缓存策略。 2. **代码压缩**： 使用 `UglifyJsPlugin` 对生产环境的代码进行压缩，可以减小文件大小并移除不必要的 console.log，以提升加载速度。在 `vue.config.js` 中配置 `UglifyJsPlugin`，在生产环境中开启代码压缩，同时设置删除调试器语句和控制台日志，以及开启并行处理以加快压缩速度。 3. **引用别名配置**： 通过设置 `resolve.alias`，可以创建模块引用的快捷方式，如对 `element-ui` 进行按需引入。这能简化代码，避免冗余引入，同时降低应用的总体大小。例如，将频繁使用的路径映射为简短的别名，使得代码更易读且打包效率更高。 4. **SCSS 配置文件优化**： 在多个组件中重复引入 SCSS 文件可能导致文件体积增大和加载次数增多。通过 `sass-loader` 可以实现全局共享 SCSS 变量或混合，避免在每个组件中单独引入。例如，将主题颜色等配置放在一个统一的 `theme.scss` 文件中，然后在 `vue.config.js` 中配置 loader，使所有组件都能直接引用，减少重复加载。 5. **减少 HTTP 请求**： 大量的 HTTP 请求会影响页面加载速度。在示例中提到，初始打包后有 217 个请求，总大小达到 3.2M。可以通过合并 CSS 和 JavaScript 文件、利用 HTTP/2 的多路复用、提取公共库到单独的 chunk 等方法减少请求数量和总体大小。 除了上述优化，还有其他可考虑的点，如使用 `Tree Shaking` 来移除未使用的代码，通过 `SplitChunksPlugin` 进行代码分割，将第三方库或公共代码独立打包；启用 gzip 压缩，利用浏览器缓存策略等。优化 Vue CLI 3 的配置需要根据项目具体需求进行调整，确保在保持代码可维护性的同时，最大化应用性能。