文章目錄

前言

一、白屏?xí)r間過長分析

二、針對性優(yōu)化

針對animate.css

針對mint-ui的優(yōu)化

針對圖片的優(yōu)化

三、webpack打包優(yōu)化與分析

webpack-bundle-analyzer打包分析

打包優(yōu)化

四、優(yōu)化后線上測試速度提升

五、優(yōu)化總結(jié)

前言

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



項(xiàng)目技術(shù)棧：基于Vue全家桶做的一個(gè)移動(dòng)端類似WebApp的項(xiàng)目，使用到的第三方庫有：mint-ui, echarts，momentjs。

項(xiàng)目痛點(diǎn)：白屏?xí)r間過長

一、白屏?xí)r間過長分析

 通過訪問線上環(huán)境，結(jié)合Chrome devtool中Network和Performance功能可以具體分析整個(gè)白屏的耗時(shí)主要在哪一塊兒

Network耗時(shí)記錄：

Performance性能面板

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

安裝babel-plugin-component， 若已安裝可忽略
修改 .babelrc (重點(diǎn)在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)
/* 或?qū)憺? * 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組件庫

針對圖片的優(yōu)化

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

三、webpack打包優(yōu)化與分析

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

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

webpack-bundle-analyzer打包分析

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

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

1. 安裝

npm intall -D webpack-bundle-analyzer

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

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

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

運(yùn)行npm run build，（webpack默認(rèn)會(huì)在打包完成時(shí)生成分析圖）

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