工作总结：优化

发表于   |   分类于

项目分析及优化：优化首屏加载时间及打包大小

这是入职公司试用期时做的优化内容，主要是部门老大对公司原项目的首屏加载时间过长，及请求内容过多，以及希望可以优化打包大小，所以根据需求，作出了下面针对性的一些配置操作，及分析处理了下打包体积。

一、说明

1. 分析环境

1
2
3
4
5
操作系统：Windows10 （64位）
处理器：Intel(R)Core(TM) i5-8400 CPU @ 2.8GHz 2.81 GHz
内存：8.00GB
node：v10.15.3
npm：v6.4.1

这是当初公司电脑的配置，因为要结合打包时间，所以记录了一下

2. 注意事项

注：以下测试根据测试环境及机器性能等各方面因数，会存在一定误差，以下数据仅取测试时的数据记录，仅供参考。

二、项目构建时间

npm run serve npm run build
1次 ~100s ~225s
2次 ~55s ~170s

打包文件夹（dist/v3）大小76.3MB，其中js文件夹31.4MB,css文件夹41.5MB

以上可见js和css文件比较大，后续可注意分析其中原因。

三、资源加载效率

本地开发环境

1.首屏加载数据

  1. npm run serve
request transferred resources finish DOMContentLoaded load
545 123MB 16.5MB ~2.68s ~1.17s ~1.96s
  1. 打包gizp压缩
request transferred resources finish DOMContentLoaded load
802 10.3MB 3.6MB ~2.24s ~965ms ~1.48s

以上可见request数量过大，后续优化可从此方面入手

四、优化方案

1.按需加载js和css文件

打包后查看index.html文件可以发现主页文档把全部的css和js都引入进去了（几百个css和js的引入）

问题原因可能是项目多页面应用，并且使用类似异步组件，vue-cli3打包时自动分离各个组件的js和css，而多页面应用了同一个html模板文件，并且配置了静态资源相关引入自动化，导致html里面自动注入了全部文件。

a.优化注入文件，按需加载

  1. 禁止自动注入js和css

修改vue.config.js给pages中每个入口加入inject: false禁止自动注入静态文件

1
2
3
4
5
6
7
8
9
10
11
12
...
pages: {
  index: {
    entry: 'xxx',
    template: 'public/index.html',
    filename: 'index.html',
    title: 'xxx',
    ...
    inject: false,
  }
}
...
  1. 修改模板文件（public/index.html），手动循环注入js和css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <% for (var chunk in htmlWebpackPlugin.files.css) { %>
    <% if(htmlWebpackPlugin.files.css[chunk]) { %>
      <link href="<% htmlWebpackPlugin.files.css[chunk] %>" rel="stylesheet" />
    <% } %>
  <% } %>
</head>
<body>
  <div id="app"></div>
  <% for (var chunk in htmlWebpackPlugin.files.js) { %>
    <% if(htmlWebpackPlugin.files.js[chunk]) { %>
      <script type="text/javascript" src="<% htmlWebpackPlugin.files.js[chunk] %>" rel="stylesheet"></script>
    <% } %>
  <% } %>
</body>
</html>

b. 验证效果

本地开发环境
1.首屏加载数据
  1. npm run serve
request transferred resources finish DOMContentLoaded load
35 16.5MB 16.5MB ~1.38s ~1.07s ~1.88s

对比原数据，request：从545减少到了35，减少了93.57%

  1. 打包gizp压缩
request transferred resources finish DOMContentLoaded load
35 1.2MB 3.6MB ~549ms ~356ms ~542ms

对比原数据，request：从802减少到了35，减少了95.63%

2.优化打包css

结合css的引入和打包后样式文件的观察分析

打包后每个css样式文件都包含了上面的代码，代码来源是全局引入的公共样式。

结合分析项目的公共样式引入方法及打包机制。

  1. 引入方法不正确
    • 现引入公共样式的方法应该只是引入公共变量和方法，不该把样式也引入。
  2. 公共less文件书写有误
    • common.less里面作为变量的样式没有处理，使得打包时webpack将其识别为样式文件，打包转译到了每一个css文件中，导致出现大量重复无用的样式代码。

针对以上问题分析优化修改

a. 处理公共样式文件，分离出变量和样式文件。

把作为变量的less文件都用上（）处理，让webpack打包转译时忽略其是样式文件

b. 修改引入变量和样式的方法

  1. 公共样式引入：在每个入口的main.js中引入

  2. 公共变量和方法引入：修改vue.config.js 配置

1
2
3
4
5
6
7
8
9
10
11
...
pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [
      // 公共变量及方法文件
      path.resolve(__dirname, 'xxxxx')
    ]
  }
}
...

c. 验证效果

1.项目构建时间
npm run serve npm run build
1次 ~35s ~63s
2次 ~30s ~53s

打包文件夹（dist/v3）大小36.3MB，其中js文件夹29.1MB,css文件夹4.4MB

综上所示，优化css文件后：

构建时间：

  1. npm run serve：1次：~100s减少到~35s，减少65%。2次：~50s减少到~30s，减少40%
  2. npm run build：1次：~225s减少到~63s，减少72%。2次：~170s减少到~53s，减少68.82%

文件大小：

dist/v3：76.3MB减少到36.3MB，减少52.42%

js：31.4MB减少到29.1MB，减少7.32%

css：41.5MB减少到4.4MB，减少89.39%

总结

以上是当初刚入职时，由于公司项目正在最后版本上线冲刺，然后我新员工没有能安排的任务，所以就给了这样一个优化需求，具体方法其实也是针对性的以部门老大提出的希望能改变的方向去进行一些配置操作，来达到需求的呈现效果，当中可能会有一些不太适合的配置操作，但是一切都是以需求为目的的开发配置的，所以就是这样成效最快的进行配置了，当然期间为了针对需求目的，也是查阅了很多资料就是了。