记录：Vue移动端项目优化过程

前言

最近在做项目时，测试提出了在App端的H5项目入口加载时间过长，白屏等待过久，需要优化的问题，于是着手开始分析：

1. 项目技术栈：基于Vue全家桶做的一个移动端类似WebApp的项目，使用到的第三方库有：mint-ui, echarts，momentjs。
2. 项目痛点：白屏时间过长

一、白屏时间过长分析

通过访问线上环境，结合Chrome devtool中Network和Performance功能可以具体分析整个白屏的耗时主要在哪一块儿

• Network耗时记录：
  
• Performance性能面板
  
• 通过上面两张图分析，从浏览器发起请求到解析HTML完成这一过程中：

1. animate.css, mini-ui.css的请求耗时最长。
2. 图片过大耗时。

二、针对性优化

针对animate.css

• animate.css由于使用的是第三方CDN（国外服务器）所有请求时间相对较长，所以如果必须要用animate.css那么可以下载下来作为本地资源，也可以使用国内CDN，或者不用animate.css，而是针对使用到的几个CSS动画，直接自己造轮子

针对mint-ui的优化

由于mint-ui在原项目中使用的是全局引用的方式，这才导致打包资源过大，css单独请求耗时过长的问题，所以主要解决方案是按需引入mint-ui，借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1. 安装babel-plugin-component， 若已安装可忽略

npm install babel-plugin-component -D

2. 修改 .babelrc (重点在plugins中)：

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