vue-cli3项目首页优化_vue3 首页过大-CSDN博客

本文链接：https://blog.csdn.net/qq_43429002/article/details/120846147

本文介绍了如何通过使用webpack-bundle-analyzer分析项目打包后的文件大小，进而采取cdn引入如echarts和momentjs等大体积库以减少包体积。在vue-cli3环境中详细阐述了cdn的配置步骤，并提到了图片的无损压缩、路由懒加载、服务器gzip压缩以及图片懒加载的实现方法。此外，还提及了通过vue.config.js进行图片压缩和剔除console及debugger代码，以及将elementUI按需加载来进一步提升前端性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先推荐大家下载一个webpack的打包分析工具 webpack-bundle-analyzer，这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大，我可以对echarts、momentjs采用cdn方式引入
在vue-cli3中采用cdn方式引入
2.1 推荐给大家我所用的cdn网址–bootcn，当然，大家也可以选用其他的cdn网址如（cdnjs,unpkg）。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
2.2 cdn的引入和普通的script引入方式一致。如下图

2.3 除了在index.html中引入，还需要将对应的引入写入到vue的配置问件中

2.4 在页面调用中用 import 导入即可。列如（import echarts from “echarts”）
除了将第三方文件用cdn方式引入，我们项目中的大图片也需要做一下无损压缩
路由采用懒加载（按需引入方式）

component: () => import( /* webpackChunkName: "about" */ './views/login.vue')

服务器配置gzip
图片懒加载
6.1 安装插件
npm install vue-lazyload --save-dev

6.2 在入口文件main.js中引入并使用
6.3 修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）
用标签包裹标签缓存
图片压缩在vue.config.js里对webpack配置,采用的是image-webpack-loader
剔除 console 和 debugger 代码在vue.config.js里对webpack配置
10.将elementUI改为按需加载