vue單頁應用首次加載太慢之性能優化

問題描述：

最近開發了一個單頁應用，上線後發現頁面初始加載要20s才能完成，這就很影響用戶體驗了，因而分析緣由，發現頁面加載時有個

vendor.js達到了3000多kb，因而在網上查找了一下緣由，是由於我打包的時候把全部第三方依賴都打包放進去了；要怎麼分離出去呢，

看下面步驟：

 

1、解決打包後vendor.js 很大，致使上線後頁面首次加載速度異常慢：

vue-cli npm run build命令默認把dependencies中的依賴統一打包，致使vendor.js文件過大，出現首屏加載過於緩慢的問題。

解決方案：使用externals引用第三方資源，防止element資源被打包到本身項目中，(總共修改3個部分index.html、webpack.base.conf.js、main.js)

 

一、修改index.html頁面，在head中引入cdn上的資源。

<!-- 正常的引入 cdn 資源便可 -->

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>

 

注意：上面是直接重cdn上引入的，若是某個時候cdn服務器出現問題，咱們的項目就癱瘓了，因此爲了安全起見要給本身留一手喔，

採用下面的方法，當上面的文件引入失敗後，就從備用的地址引入；固然備用的地址你也能夠換成本地的，我這裏是放的另外一個cdn服務器上的，

應該不會兩個服務器同時出現故障吧！...

<!-- 引入 cdn 資源 -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
　　//<![CDATA[
　　if (typeof Vue == 'undefined') { 　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue/2.6.10/vue.min.js' %3E%3C/script%3E")); 　　} //]]> </script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script> 　　//<![CDATA[ 　　if (typeof VueRouter == 'undefined') { 　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/vue-router/3.0.7/vue-router.min.js' %3E%3C/script%3E")); 　　} //]]> </script> <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script> <script> 　　//<![CDATA[ 　　if (typeof ELEMENT == 'undefined') { 　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/element-ui/2.10.1/index.js' %3E%3C/script%3E")); 　　} //]]> </script> <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script> <script> 　　//<![CDATA[ 　　if (typeof echarts == 'undefined') { 　　　　document.write(unescape("%3Cscript src='https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts-en.min.js' %3E%3C/script%3E")); 　　} //]]> </script>

 

 

二、修改webpack.base.conf.js文件.添加externals配置

externals: {

　　'vue': 'Vue', 　　'vue-router': 'VueRouter', 　　'element-ui': 'ELEMENT', 　　"echarts": "echarts", },

 

3. 刪除main.js中的相應import from。由於若是不刪除，打包的時候還會把這兩個文件打進去。

 

最後去打包，發現vendor.js只有300kb了。上線後發現頁面首次加載飛快了。

 

下面再補充一些其它優化：

一、路由懶加載確定是要作的：

當打包構建應用時，Javascript 包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，

而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，

輕鬆實現路由組件的懶加載。具體實現方法官網和網上有不少例子，這裏就不詳細講解了。

 

 

三、本地圖片與請求的後臺圖片的大小：

在我這個項目中有不少圖片，最開始沒太在乎圖片的大小，致使上線後不少大的圖片加載很慢，因而我把圖片作了壓縮處理；推薦個網站：

http://www.bejson.com/ui/compress_img/（壓縮圖片不失幀）；

固然咱們也可使用webpack裏的插件對打包的圖片進行壓縮，也可使用gulp.js裏的插件對圖片進行壓縮。具體本身去百度吧...

 

四、打包後app.css過大：

咱們能夠把app.css作拆分，能夠利用 webpack 中的 dll 作一部分的分割，好比第三方等的公用 css 文件。

而後再者能夠利用 mini-css-extract-plugin 這個插件作各自模塊的 css 文件提取（若是用的是webpack4）,

webpack3 的化能夠用 extract-text-webpack-plugin。