前端性能优化 —— 项目瘦身

在咱们的平常开发中，咱们常常须要引入各类各样的第三方模块来帮助咱们提高开发速度。可是有时候这些模块里面又包含了许多咱们用不到的模块，在打包的时候又一并打包进去了，这就形成了不必的带宽浪费。这里以Vue项目为例。

1、准备工做

1. 使用 Vue Cli 3

这时咱们就要掏出咱们的Vue项目利器 —— Vue cli 3

在 CLI 服务中的 vue-cli-service build的文档中能够看到：

--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你能够在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

所以咱们在build项目的时候就能够这么作：

vue-cli-service build --report
复制代码

./node_modules/.bin/vue-cli-service build --report
复制代码

这两种方式均可以帮咱们生成报告，运行其中一个命令(第一个命令不行的小伙伴能够直接运行第二个命令)后咱们能够看到dist目录下多出了一个report.html文件：

这样，咱们只要直接在浏览器中打开report.html就能看到模块分析了，以下图：

2. Angular 项目

Angular项目的ng-cli一样有相似的功能，咱们只须要在编译时加上--stats-json选项便可。而后再经过webpack.github.io/analyse/对生成的json文件进行分析，或者使用webpack-bundle-analyzer插件。

3. 其它方式

若是是其它用户，则须要安装webpack-bundle-analyzer

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer
复制代码

webpack 配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
复制代码

编译完成后一样能够生成分析报告。

2、echarts 按需加载

1. 新建按需引入配置文件

在项目中，咱们可能不会用到全部的 echart 模块，只会用到个别图表或组件，这样咱们就能够只引入用到的，能有效减小资源的加载时间。

咱们先新建一个专门的 echart 配置文件来引入相关代码：

// 路径：@/lib/echarts.js

// 引入主模块
const echarts = require('echarts/lib/echarts');

// 引入柱状图
require('echarts/lib/chart/bar');

// 引入相关组件
require("echarts/lib/component/dataZoom");

export default echarts
复制代码

固然也可使用import：

// 路径：@/lib/echarts.js

// 引入主模块
import echarts from 'echarts/lib/echarts'
 
// 引入柱状图
import 'echarts/lib/chart/bar'

// 引入相关组件
import 'echarts/lib/component/dataZoom'

export default echarts
复制代码

具体有哪些选项，能够直接查看node_modules目录下的echarts/index.js

2. 在用到的组件中引入 echarts

import echarts from '@/lib/echarts'
复制代码

若是这个图表仅仅针对这个组件，或者说用户使用到频率很低，咱们可使用懒加载的方式进一步优化，等到用户使用到这个组件的时候才去加载echart图表：

methods: {
  init() {
    import("../../lib/echarts").then(Echarts => {
      // ...
    }
  }
}
复制代码

这时咱们再经过vue-cli工具来从新build项目，打开report.html分析对比优化先后的echart大小：

结果一目了然。

3、crypto-js 按需加载

除了echart可使用这种方式，别的第三方库也能使用这些方法来加载。

咱们常常会这样使用：

import crypto from 'crypto-js'

// ...
crypto.HmacSHA1()
// ...
复制代码

上面这种方式会引入整个crypto-js

显然除了HmacSHA1方法以外，咱们不会使用到别的方法，那样就很是得不偿失了，所以咱们能够像下面这样作：

import HmacSHA1 from 'crypto-js/hmac-sha1'

// 若是要引入 Base64
import Base64 from 'crypto-js/enc-base64'
复制代码

具体有哪些能够单独引入的，能够直接查看node_modules目录下的crypto-js目录

如今，咱们再build来看看优化后的对比：

简直天差地别。

4、UI库 按需加载

若是咱们为了快速开发一些公司内部的后台项目，或者是本身想作点东西来玩玩，可是不想写一些重复的样式，咱们就会采用一些UI库。一些知名的UI库都是十分完善的，几乎包含全部平常所需的组件，所以它们的体积也是十分庞大的。若是咱们只用到部分组件，但引入了全部组件，这样就不值得了。

以Element-ui为例，UI框架经过借助babel-plugin-component来按需引入组件。这里我就再也不如何进行按需引入了，官方文档已经写得十分详细了，Element-ui官方文档。

5、懒加载

上面echarts优化中就已经使用过懒加载了，相信各位熟悉Vue的小伙伴都知道这种加载方式，咱们能够在使用到该组件的时候再把组件下载下来。依个人经验来讲，通常不经常使用的、单独的模块可使用这种方式，经过import引入。注意，这其实是由webpack提供的方法，而非Vue自身提供的方法。

Vue Router路由懒加载：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const AsyncComponent = () => import('components/async-component/async-component')

export default new Router({
  routes: [
    {
      path: '/',
      component: 'AsyncComponent'
    },
  ]
})
复制代码

异步组件：

components: {
  AsyncComponent: () => import('./async-component')
}
复制代码

6、Moment.js 和 IgnorePlugin

经常使用的日期处理类库Moment.js竟然有540.76kb，真是让人难以置信。见下图：

它如此巨大的缘由是由于有不少语言资源文件，用于转化能成多国时间格式，见GitHub issue。大多数状况下，咱们并不须要用到这么多的格式，可是咱们不能像上面的echart和crypto那样按需加载，所以咱们须要借助IgnorePlugin。

在Vue根目录下新建vue.config.js文件，而后在里面添加配置：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    ]
  }
}
复制代码

这时咱们就能够按需引入语言包：

const moment = require('moment');
require('moment/locale/zh-cn');
 
moment.locale('zh-cn');
复制代码

这时咱们再来看看它的大小：

7、总结

经过上面的例子，我想你们也能感觉到许多第三方库由于要照顾到绝大部分状况，所以会比较大，可是咱们能够经过一些方式只获取咱们须要的部分。上面的对比图也显而易见了，减肥的效果是很是明显的，经过上面的方式，可以较大的提高用户体验，减小项目加载时间。