包体积，打包速度优化

概述

项目开发中，最好必不可少的一环就是对已上线项目进行优化处理，压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，结合工作中的实践总结，梳理出一些常规且有效的性能优化建议。

初始体积 2.25M

配置如下

在 vue.config.js 中引入添加配置 webpack-bundle-analyzer

ini 复制代码

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

externals 提取项目依赖

从上面的打包分析页面中可以看到，chunk-vendors.js 体积为 2.21M，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals 来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中

1）vue.config.js 中配置：

css 复制代码

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts'
    }
}

2）在 index.html 中使用 CDN 引入依赖

xml 复制代码

<body>
  <script src="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
  <script src="http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
  <script src="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script>
  <script src="http://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script>
</body>

验证 externals 的有效性：

重新打包，最新数据如下：

打包体积：1.12M

打包速度：18879ms

使用 externals 后，包体积压缩 50%、打包速度提升 26%

组件库的按需引入

elementUI 需要借助 babel-plugin-component 插件实现，插件的作用如下：

如按需引入 Button 组件：

css 复制代码

import { Button } from 'element-ui';

Vue.component(Button.name, Button);

编译后的文件（自动引入 button.css）：

javascript 复制代码

import _Button from 'element-ui/lib/button';
import _Button2 from 'element-ui/lib/theme-chalk/button.css';
// base.css是公共的样式
import 'element-ui/lib/theme-chalk/base.css';

Vue.component(_Button.name, _Button);

通过该插件，最终只引入指定组件和样式，来实现减少组件库体积大小

1）安装 babel-plugin-component

npm install babel-plugin-component -D

2）babel.config.js 中引入

css 复制代码

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
};

验证组件库按需引入的有效性：

重新打包，最新数据如下：

打包体积：648KB

打包速度：15135ms

组件库按需引入后，包体积压缩 72%、打包速度提升 40%

同时 chunk-vendors.css 的体积也有了明显的减少，从206KB降到了82KB

原始体积：

按需引入后

减小三方依赖的体积

继续分析打包文件，项目中使用了 momentjs，发现打包后有很多没有用到的语言包

使用 moment-locales-webpack-plugin 插件，剔除掉无用的语言包

1）安装

npm install moment-locales-webpack-plugin -D

2）vue.config.js 中引入

ini 复制代码

const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [new MomentLocalesPlugin({ localesToKeep: ['zh-cn'] })]
  }
};

验证插件的有效性：

重新打包，最新数据如下：

打包体积：407KB

打包速度：10505ms

减小三方依赖体积后，包体积压缩 82%、打包速度提升 59%

Gzip 压缩

线上的项目，一般都会结合构建工具 webpack 插件或服务端配置 nginx，来实现 http 传输的 gzip 压缩，目的就是把服务端响应文件的体积尽量减小，优化返回速度

html、js、css 资源，使用 gzip 后通常可以将体积压缩 70%以上

这里介绍下使用 webpack 进行 gzip 压缩的方式，使用 compression-webpack-plugin 插件

1）安装

npm install compression-webpack-plugin -D

2）vue.config.js 中引入

javascript 复制代码

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: /.(js|css)(?.*)?$/i, //需要压缩的文件正则
        threshold: 1024, //文件大小大于这个值时启用压缩
        deleteOriginalAssets: false //压缩后保留原文件
      })
    ]
  }
};

验证插件的有效性：

重新打包，原来 407KB 的体积压缩为 108KB

总结

经过上面的一系列优化，可以看到：

包体积由原来的 2.25M 减少到 407KB，压缩了 82%
打包速度由原来的 25386ms减少到 8949ms，提升了 65%

这些方式虽然很常规，但确实可以有效地提升项目的性能。