帝皇彩票官网

Vue移动端项目优化过程

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,而大图可以通过压缩或者换格式的方式来优化,这里推荐一个好用的图片压缩工具,,如下是图片转换前后对比


点击查看原图


三、webpack打包优化与分析

在完成了上述优化以后,下面着重关注下webpack打包后生成的文件大小,看还有没有可以优化的余地。由于项目中已经通过路由按需加载的方式来做了功能拆分,所以通过webpack打包后生成了很多分散的js文件,如下图:


20200313153537713.png

通过上图分析可以知道打包后有几个文件相对较大,vendor.js都知道是第三方库文件打包形成,之前通过mint-ui按需加载会有一定的变化,后面记录。这里着重看另两个带hash的js文件,这里并看不出来它为什么这么大,所以这里需要用到webpack打包分析工具来做进一步的打包文件分析:webpack-bundle-analyzer

webpack-bundle-analyzer打包分析

它的作用如下图,即在打包后生成打包文件大小分析图,方便我们更加直观的看到文件大小和引用情况

点击查看原图



  • 这里先介绍下webpack-bundle-analyzer的简单使用
  1. 安装
npm intall -D webpack-bundle-analyzer
  1. 修改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

标签: VUE

日历

链接

blogger

蓝蓝 http://www.bjhbys.com

存档

迪士尼彩乐园 桔子彩票网址 迪士尼彩乐园 一品彩票开户 迪士尼彩乐园 吉利彩票计划 优优彩票网 桔子彩票注册 迪士尼彩乐园 迪士尼彩乐园