文章目錄

前言

一、白屏時間過長分析

二、針對性優化

針對animate.css

針對mint-ui的優化

針對圖片的優化

三、webpack打包優化與分析

webpack-bundle-analyzer打包分析

打包優化

四、優化后線上測試速度提升

五、優化總結

前言

最近在做項目時，測試提出了在App端的H5項目入口加載時間過長，白屏等待過久，需要優化的問題，于是著手開始分析：



項目技術棧：基于Vue全家桶做的一個移動端類似WebApp的項目，使用到的第三方庫有：mint-ui, echarts，momentjs。

項目痛點：白屏時間過長

一、白屏時間過長分析

 通過訪問線上環境，結合Chrome devtool中Network和Performance功能可以具體分析整個白屏的耗時主要在哪一塊兒

Network耗時記錄：

Performance性能面板

通過上面兩張圖分析，從瀏覽器發起請求到解析HTML完成這一過程中：
animate.css, mini-ui.css的請求耗時最長。
圖片過大耗時。
二、針對性優化
針對animate.css
animate.css由于使用的是第三方CDN（國外服務器）所有請求時間相對較長，所以如果必須要用animate.css那么可以下載下來作為本地資源，也可以使用國內CDN，或者不用animate.css，而是針對使用到的幾個CSS動畫，直接自己造輪子
針對mint-ui的優化
由于mint-ui在原項目中使用的是全局引用的方式，這才導致打包資源過大，css單獨請求耗時過長的問題，所以主要解決方案是按需引入mint-ui，借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

安裝babel-plugin-component， 若已安裝可忽略
修改 .babelrc (重點在plugins中)：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime",["component", [
      {
          "libraryName": "mint-ui",
          "style": true
      }
  ]]],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

在main.js中引用使用到的插件

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import 'mint-ui/lib/style.min.css'  // 引用CSS
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫為
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: '#app',
  components: { App }
})

在使用的組件中改為按需引用組件

import Vue from 'vue'
 var Popup = Vue.component('mt-popup')
 var Swipe = Vue.component('mt-swipe')
 var SwipeItem = Vue.component('mt-swipe-item')
 export default {
    name:'my-component',
    components:{
     Popup,
     Swipe,
     SwipeItem
    }
}

此按需引入方案也同樣適用于其他第三方UI組件庫

針對圖片的優化

圖片小圖通過webpack可以直接轉為base64，而大圖可以通過壓縮或者換格式的方式來優化，這里推薦一個好用的圖片壓縮工具，工具：tinyPNG,如下是圖片轉換前后對比

三、webpack打包優化與分析

在完成了上述優化以后，下面著重關注下webpack打包后生成的文件大小，看還有沒有可以優化的余地。由于項目中已經通過路由按需加載的方式來做了功能拆分，所以通過webpack打包后生成了很多分散的js文件，如下圖：

通過上圖分析可以知道打包后有幾個文件相對較大，vendor.js都知道是第三方庫文件打包形成，之前通過mint-ui按需加載會有一定的變化，后面記錄。這里著重看另兩個帶hash的js文件，這里并看不出來它為什么這么大，所以這里需要用到webpack打包分析工具來做進一步的打包文件分析：webpack-bundle-analyzer

webpack-bundle-analyzer打包分析

它的作用如下圖，即在打包后生成打包文件大小分析圖，方便我們更加直觀的看到文件大小和引用情況

• 這里先介紹下webpack-bundle-analyzer的簡單使用

1. 安裝

npm intall -D webpack-bundle-analyzer

2. 修改webpack.pro.conf.js. （這里由于只是用于生產打包分析且是通過vue-cli生成的項目框架）

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    // ...
    plugins:[
        new BundleAnalyzerPlugin()
    ]
}

運行npm run build，（webpack默認會在打包完成時生成分析圖）

版權聲明：本文為CSDN博主「Sophie_U」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Sophie_U/article/details/104840167