前沿

最近利用node+vue+mongodb開發完成了一個個人部落格網站，部署部署到伺服器上後，開始訪問非常慢，需要7~9s的時間，無法忍受，所以將著手對專案進行一點優化嘗試。通過對build後的打包檔案發現，vendor.js檔案竟然有1點幾兆，導致瀏覽器載入十分緩慢，而且我的伺服器配置也不是很高。

專案目錄結構

首先先對專案的整體結構做一下梳理，清楚每一個檔案都是做什麼用的，如下圖：

在開始學習利用vue+node+mongodb進行專案實戰時，由於不太懂，所以參考了很多資料，看到網上有用到什麼庫檔案，我也就嘗試去使用，導致整個專案引入了很多無用的庫，體積就變得臃腫不堪，所以本次優化重點是針對引入的庫進行優化。

給專案瘦身

經過嘗試，刪除幾個可以不用的庫檔案，再次build後，vendor.js的體積就只有一百多k了，部落格開啟的速度也明顯提上來了，比如其中moment.js庫，我用自定義的時間格式轉換的js方法來替代，這個moment在build時就佔了好幾百K，所以果斷放棄使用。具體如下圖所示：

對於已經引入的庫如何刪除呢？我的做法是：首先刪除package.json檔案中的dependency節點中的不用的庫，同時找到node_modules下對應的包檔案，一併刪除，最後在執行一遍 npm install 就可以了：

結語

這只是專案優化的第一步，後續還會做一些其他方面的優化嘗試，比如快取等，同時我也會vue裡繼續深耕。。。