vue-cli3項目優化首頁加載過慢的一些心得

博主最近發現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）