vue-cli3项目优化首页加载过慢的一些心得

标签：还需   none   第三方   import   服务   block   技术分享   还需要   src   

博主最近发现vue-cli3项目做完后，点击首页加载时间好久啊，一般都要3-5s。这样的加载时间博主自己都受不了，所以就有了这个随笔，将自己的一些研究心得分享给大家。

• 首先推荐大家下载一个webpack的打包分析工具  webpack-bundle-analyzer，这个工具用作分析你项目的打包出来的js包的大小。然后你可以根据这个工具找到需要优化的js包优化。比如打的包js里echarts、momentjs等都很大，我可以对echarts、momentjs采用cdn方式引入
• 在vue-cli3中采用cdn方式引入

1. 1. 推荐给大家我所用的cdn网址--bootcn，当然，大家也可以选用其他的cdn网址如（cdnjs,unpkg）。个人更推荐使用bootcn是因为这个是国内较好的cdn网址。
   2. cdn的引入和普通的script引入方式一致。如下图
      
   3. 除了在index.html中引入，还需要将对应的引入写入到vue的配置问件中
      
   4. 在页面调用中用 import 导入即可。列如（import echarts from "echarts"）

• 除了将第三方文件用cdn方式引入，我们项目中的大图片也需要做一下无损压缩
• 路由采用懒加载（按需引入方式）
  
  
  

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

  　　

• 最后是服务器配置gzip（gzip）

vue-cli3项目优化首页加载过慢的一些心得

标签：还需   none   第三方   import   服务   block   技术分享   还需要   src   

原文地址：https://www.cnblogs.com/XCWebLTE/p/10141997.html