博主最近發現vue-cli3項目做完后，點擊首頁加載時間好久啊，一般都要3-5s。這樣的加載時間博主自己都受不了，所以就有了這個隨筆，將自己的一些研究心得分享給大家。

• 首先推薦大家下載一個webpack的打包分析工具??webpack-bundle-analyzer，這個工具用作分析你項目的打包出來的js包的大小。然后你可以根據這個工具找到需要優化的js包優化。比如打的包js里echarts、momentjs等都很大，我可以對echarts、momentjs采用cdn方式引入
• 在vue-cli3中采用cdn方式引入

推薦給大家我所用的cdn網址--bootcn，當然，大家也可以選用其他的cdn網址如（cdnjs,unpkg）。個人更推薦使用bootcn是因為這個是國內較好的cdn網址。

cdn的引入和普通的script引入方式一致。如下圖

除了在index.html中引入，還需要將對應的引入寫入到vue的配置問件中

在頁面調用中用 import 導入即可。列如（import echarts from "echarts"）

• 除了將第三方文件用cdn方式引入，我們項目中的大圖片也需要做一下無損壓縮
• 路由采用懶加載（按需引入方式）
  
  
  component: () => import( /* webpackChunkName: "about" */ './views/login.vue')

  　　

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

轉載于:https://www.cnblogs.com/XCWebLTE/p/10141997.html

總結

以上是生活随笔為你收集整理的vue-cli3项目优化首页加载过慢的一些心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。