NUXT項目的性能優化

背景

---

 

　　新入職公司還處於交接中，最近一個海外的官網其餘同事更新以後出現訪問超時問題，部分超大的js下載不下來的問題，就嘗試着想要優化一下。

項目結構是 NUXT2.0+ Element UI，使用 NUXT的主要緣由仍是爲了SEO優化，Vue在SEO上是弱項

過程

---

打算使用webpack打包

　　翻了翻NUXT的文檔 發現這傢伙其實仍是基於Webpack打包的，因而乎就想和普通的VUE項目通常使用 DLLPlugin 、 CommonChunkPlugin將大文件分割 而後把公用的插件 ‘element ui’ 、’vue2-editor‘ 之類的單獨打包成一個js這樣子就不會阻礙頁面加載之類的 巴拉巴拉巴拉 ，看着nuxt.config.js 有點無從下手的感受， 找了找 在NUXT 中如何使用 webpack 插件， 官方有給出示例，https://zh.nuxtjs.org/faq/webpack-plugins。嘗試用了一下發現沒有效果 多是我不會用，而後就放棄了使用webpack插件 開始了漫長的NUXT壓縮教程尋找之路

尋找NUXT的解決方案

　　通過漫長的百度尋找終於找到了一個NUXT 的比較完整的教程，不過是臺灣的（ps：爲何國內沒有找到完整的教程，可能用到的人很少吧，反正教程少的可憐）https://ithelp.ithome.com.tw/users/20107107/ironman/1614?page=1,，這是一個完整的教程，我找的主要是使用SplitChunks 這個是 NUXT 2.0 + 開始支持的配置  （這裏是地址：https://ithelp.ithome.com.tw/articles/10207669） 裏面有講到使用 LodashModuleReplacementPlugin 我在使用的時候老是提示 'babel-plugin- not found' , 其實使用 SplitChunks 的時候效果就很明顯了就沒有繼續研究怎麼使用LodashModuleReplacementPlugin  

這是使用後的效果：

不少大文件都已經被分割成小文件了  兩個最大的文件你們能夠忽略 ，這兩個是svg 文件，主要是圖標，後面改了引用方式也就不會打包成js 文件了

剩下的釘子戶就只剩下了element ui 解決它基本上就不存在大文件了

Element UI 部分引用 

　　仔細查看了項目對element ui 發現使用的是徹底引用，可是實際上用到的插件不多， 這就好辦了直接改爲部分引用， 果不其然改爲了部分引用文件直接縮小一半 ，同時將 圖標的引用方式修改以後去掉了兩個大文件， 效果圖以下

結語

---

 

　　寫這個隨筆主要是記錄一下當時優化的思路，記性很差防止忘記， 主要是作後端開發，前端開發都是兼職啦 。  或許有再優化會繼續更新， 小白一枚歡迎大神指點