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

三、webpack打包优化与分析

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

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

webpack-bundle-analyzer打包分析

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

这里先介绍下webpack-bundle-analyzer的简单使用

安装

npm intall -D 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

« CSS学习笔记（一）——CSS基础&选择器合集数据类型的转化（JavaScript） »