Vue-cli 3 打包优化：路由懒加载与代码压缩

"关于vue-cli 3配置打包优化要点（推荐）" 在Vue.js开发过程中，使用vue-cli 3可以极大地提升开发效率。然而，为了提高应用的性能和加载速度，我们需要对打包过程进行优化。以下是一些关键的vue-cli 3配置打包优化要点： 1. 路由懒加载： 路由懒加载允许我们按需加载组件，只有当用户访问特定路由时才会加载对应的视图。这可以通过封装异步组件实现，如示例代码所示，创建一个名为`AsyncComponentHook`的函数，它接收一个路径作为参数，动态导入对应视图文件。这样可以显著减少首次加载时的资源体积。 2. 代码压缩： 使用`UglifyJsPlugin`插件可以对生产环境的代码进行压缩，去除冗余代码、警告和调试语句。在`vue.config.js`中添加配置，当环境变量`NODE_ENV`为'production'时，启用代码压缩并配置相应的选项，如关闭源码映射，开启并行处理等。 3. 设置引用别名： 通过配置`alias`，我们可以为常用的库或目录设置快捷路径，例如针对Element-UI等库进行按需引入。这样可以简化导入语句，同时有助于减少重复的依赖导入。 4. 优化SCSS配置文件引入： 为了避免在每个组件中都引入scss配置文件，可以利用`sass-loader`的预处理功能。创建一个全局scss文件，然后在项目中统一引入，这样可以减少文件的引入次数，提高编译效率。 5. 提取公共chunks： 通过配置`optimization.splitChunks`，可以将公共模块提取到单独的chunk中，使得多个页面可以复用这些模块，减少网络请求。 6. 图片和字体图标优化： 使用`file-loader`或`url-loader`处理图片和字体图标，小于一定大小的文件会被转换为base64编码内联到CSS或JS中，减少HTTP请求。 7. 启用HTTP2： 如果服务器支持，启用HTTP2可以利用其多路复用特性，减少网络延迟。 8. 预加载和预读取： 配置预加载或预读取策略，根据路由关系提前加载关联资源，提高用户体验。 9. PWA优化： 可以集成Workbox插件，实现离线缓存和Service Worker，提升应用的离线可用性和加载速度。 10. Tree Shaking： 利用ES6的模块语法和webpack的Tree Shaking功能，移除未使用的代码，进一步减小包的大小。 通过以上这些优化策略，我们可以有效地降低打包后的资源大小，减少HTTP请求，提升应用的加载速度和运行效率。在实际开发中，应根据项目的具体需求和规模，选择合适的优化方案。