2020-3-15 前端達人
文章目錄
前言
一、白屏時間過長分析
二、針對性優化
針對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打包后生成了很多分散的js文件，如下圖：
通過上圖分析可以知道打包后有幾個文件相對較大，vendor.js都知道是第三方庫文件打包形成，之前通過mint-ui按需加載會有一定的變化，后面記錄。這里著重看另兩個帶hash的js文件，這里并看不出來它為什么這么大，所以這里需要用到webpack打包分析工具來做進一步的打包文件分析：webpack-bundle-analyzer
它的作用如下圖，即在打包后生成打包文件大小分析圖，方便我們更加直觀的看到文件大小和引用情況
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