记前端项目首屏加载优化（打包篇）

看了一下我司官网的webpack打包出来的大小情况，发现有很多可以优化的点，比如 lodash、moment.js、antd等等；
本文主要围绕webpack的打包优化，并根据业务情况适当的做减法。

优化前分析

优化前一定要有一个界面能记录目前的打包情况，推荐用webpack-bundle-analyzer这个包, 它可以看到打包后每个模块的大小，还能给出gizp压缩后的大小，在生产环境中加载的模块都是经过gzip压缩过的，可以作为真实访问的大小依据。
安装也很简单：

1
2
3
4
5
6
7
8
9
10
11
// cli
npm install --save-dev webpack-bundle-analyzer

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

注意生产环境(production)是代表线上真实的环境，所以analyzer要对生产环境的包进行分析的，所以我配置了一下本地打包生产环境的构建配置，在package.json加入下面的配置:

1
2
3
4
"scripts": {
    ...
    "local_production": "cross-env NODE_ENV=local_production npm run build"
}

然后在webpack配置里面判断process.env.NODE_ENV === 'local_production'，构建production环境的构建并且加入analyzer分析生产环境打包出来的情况。

这里是我的项目用analyzer生成出来的包大小情况（打包前）

主要看index.xxxx.js，它包含了所有的公共依赖，我们要做的就是减少不必要的公共资源的体积，可以减少大量不必要的代码。

逐个击破

分析antd

从上面的可以看出来antd.less占了很大部分面积，因为我要在项目中自定义theme，但是官方的那套配置的形式来自定义theme只能修改变量，不能改组件，所以我先加载所有的antd.less再在后面接着加载一个theme.less用于修改主题变量和修改antd组件样式。

  • 可能是我当时搭项目的时候想太多了，由于是官网项目，所有的组件都是根据ui来自己写的，很少用到antd的组件，项目开发了几十个页面了也没有用到这种自定义组件的情况，所以其实可以不加载这个庞大的antd.less，然后antd按需加载是必须的。
  • 后来发现我项目中用到的antd组件只有两个（轮播和单选框），其实轮播是可以用react-slick替代的，而单选框更是可以自己实现的，所以大胆的直接把antd给移除掉了，用其他插件替代即可。

移除了antd之后index包小了三百多k，这还远远不够，接着看下面的优化点

优化lodash

lodash也是需要优化按需加载的方式的，推荐这篇教程Webpack按需打包Lodash的几种方式, 按照教程改进后，lodash 小了500多k。

优化moment

其实moment引进来的时候会带有很多语言包的，我们只用到了其中一个中文的包，所以其他语言包都可以去掉，

1
2
3
plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
]

后来又发现项目中只用到了moment().format()这个方法，由于moment.js只有一个大的moment.js模块，没有按模块分开写，无法按需打包，那么其实我们可以自己实现个简易版的moment来替代moment.js，下面是我找到的实现简易版moment代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// 简易版moment代替moment.js
class Moment {
  private date:Date;
  constructor(arg = new Date().getTime()) {
    this.date = new Date(arg);
  }
  padStart(num) {
    num = String(num);
    if (num.length < 2) {
      return '0' + num;
    } else {
      return num;
    }
  }
  unix() {
    return Math.round(this.date.getTime() / 1000);
  }
  static unix(timestamp) {
    return new Moment(timestamp * 1000);
  }
  format(formatStr) {
      const date = this.date;
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const week = date.getDay();
      const hour = date.getHours();
      const minute = date.getMinutes();
      const second = date.getSeconds();
      const weeks = ['一', '二', '三', '四', '五', '六', '日'];

      return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|h{1,2}|m{1,2}|s{1,2}/g, (match) => {
          switch (match) {
          case 'YY':
              return String(year).slice(-2);
          case 'YYY':
          case 'YYYY':
              return String(year);
          case 'M':
              return String(month);
          case 'MM':
              return this.padStart(month);
          case 'D':
              return String(day);
          case 'DD':
              return this.padStart(day);
          case 'd':
              return String(week);
          case 'dd':
              return weeks[week];
          case 'ddd':
              return '周' + weeks[week];
          case 'dddd':
              return '星期' + weeks[week];
          case 'h':
              return String(hour);
          case 'hh':
              return this.padStart(hour);
          case 'm':
              return String(minute);
          case 'mm':
              return this.padStart(minute);
          case 's':
              return String(second);
          case 'ss':
              return this.padStart(second);
          default:
              return match;
          }
      });
  }
}

export const moment = (arg) => {
  return new Moment(arg);
};

这样就直接可以把moment.js 干掉了，包体积又小了不少。

下面是优化后的analyzer生成出来的包大小情况


包体从2.7M优化到了1.7M，gzip从297k减小到212k，访问虽然只是快了一点点，但在低网速环境下访问还是看得到区别的。

首屏加载视觉优化

接下来讲一个跟包大小无关又很重要的优化点，就是单页应用的第一个入口html，正常情况下入口html只是用来加载js包，等js加载完之后才渲染出相关界面出来，这个入口html本身没有内容展示，但它是整个网站的第一个请求，取到这个入口html之后才开始加载js，等到加载完js才开始渲染界面，这段时间是占网站整体加载时间最多的，如下图：


第一个请求只要128ms，直到加载完公共js渲染出界面需要1s左右，这时候如果入口index没内容的话那就是纯粹的白屏时间了，所以我们应该好好利用这个入口index.html，可以做一个骨架屏或者loading动画，能让用户在等白屏时间里能够有个界面能看到，停留时间会更长一些，也能让用户以为这个网站一下就刷出来看到东西的感觉。

对于这个入口index的利用，我是加入了顶部导航栏进去的，让用户可以第一眼看到导航栏知道有什么导航项，而且也是可以点进去的，而内容区对于不同的路径访问会有不同的界面，所以我就简单的弄个loading即可。

至此，这一版优化减少了加载的时间，同时合理利用了入口index作为loading页，提高用户体验。

总结

前端优化工作是一个长期且复杂的工作，有很多可以考虑的地方，可以根据网络环境、框架、用户群体、业务情况、代码结构等多个方面合理地安排选择优化方案，本文只是我对于现有公司官网的优化的一部分，在这里分享给大家，如果觉得有用就点个赞吧👍