--- theme: juejin highlight: androidstudio --- 压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些 `常规且有效` 的性能优化建议 ## 项目背景技术栈： vue-cli3 + vue2 + webpack4 主要插件：elementUI + echarts + axios + momentjs **目标：** 通过一系列的优化方案，对比打包体积和速度的前后变化，来验证方案的有效性 ## 项目初始体积与速度 - **初始体积 `2.25M`**

vue 项目可以通过添加--report命令： `"build": "vue-cli-service build --report"`，打包后 dist 目录会生成 report.html 文件，用来分析各文件的大小或者通过安装 `webpack-bundle-analyzer` 插件来分析，步骤如下： 1）安装 ``` npm install webpack-bundle-analyzer -D ``` 2）vue.config.js中引入 ``` const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: { plugins: [ new BundleAnalyzerPlugin() ] } } ``` 3）npm run serve运行后，在浏览器打开`http://127.0.0.1:8888/` 可以看到分析页面 - **初始打包速度 `25386ms`**

## 开始优化 ✈︎ ### 1、externals 提取项目依赖从上面的打包分析页面中可以看到，`chunk-vendors.js` 体积为 `2.21M`，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题可以使用 `externals` 来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中 1）vue.config.js 中配置： ``` module.exports = { configureWebpack: { externals: { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', echarts: 'echarts' } } ``` 2）在 index.html 中使用 CDN 引入依赖 ``` ``` **验证 externals 的有效性：** 重新打包，最新数据如下：打包体积：`1.12M`

打包速度：`18879ms`

使用 externals 后，包体积压缩50%、打包速度提升26% ### 2、组件库的按需引入为什么没有使用 externals 的方式处理组件库呢？ **externals缺点**：直接在html内引入的，失去了按需引入的功能，只能引入组件库完整的js和css 组件库按需引入的原理：最终只引入指定组件和对应的样式 elementUI 需要借助 [babel-plugin-component](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FQingWei-Li%2Fbabel-plugin-component "https://github.com/QingWei-Li/babel-plugin-component") 插件实现，插件的作用如下：如按需引入 Button 组件： ``` import { Button } from 'element-ui' Vue.component(Button.name, Button) ``` 编译后的文件（自动引入 button.css）： ``` 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中引入 ``` module.exports = { presets: ['@vue/app'], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] }; ``` **验证组件库按需引入的有效性：** 重新打包，最新数据如下：打包体积：`648KB`

打包速度：`15135ms`

组件库按需引入后，包体积压缩72%、打包速度提升40% 同时 `chunk-vendors.css` 的体积也有了明显的减少，从`206KB`降到了`82KB` 原始体积：

按需引入后：

### 3、减小三方依赖的体积继续分析打包文件，项目中使用了 momentjs，发现打包后有很多没有用到的语言包

使用 `moment-locales-webpack-plugin` 插件，剔除掉无用的语言包 1）安装 ``` npm install moment-locales-webpack-plugin -D ``` 2）vue.config.js 中引入 ``` const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new MomentLocalesPlugin({localesToKeep: ['zh-cn']}) ] } } ``` **验证插件的有效性：** 重新打包，最新数据如下：打包体积：`407KB`

打包速度：`10505ms`

减小三方依赖体积后，包体积压缩82%、打包速度提升59% ### 4、HappyPack 多线程打包由于运行在 Node.js 之上的 webpack 是单线程模型的，我们需要 webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力 `HappyPack` 就能实现多线程打包，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，来提升打包速度 1）安装 ``` npm install HappyPack -D ``` 2）vue.config.js 中引入 ``` const HappyPack = require('happypack'); const os = require('os'); // 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程 const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); module.exports = { configureWebpack: { plugins: [ new HappyPack({ id: 'happybabel', loaders: ['babel-loader'], threadPool: happyThreadPool }) ] } } ``` **验证 HappyPack 的有效性：** 重新打包，最新数据如下：打包速度：`8949ms`

使用HappyPack后，打包速度进一步提升了65% 由于测试项目较小，打包时间缩短的不算太多。实测发现越是复杂的项目，HappyPack 对打包速度的提升越明显 ### 5、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 中引入 ``` const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new CompressionPlugin({ test: /\.(js|css)(\?.*)?$/i, //需要压缩的文件正则 threshold: 1024, //文件大小大于这个值时启用压缩 deleteOriginalAssets: false //压缩后保留原文件 }) ] } } ``` **验证插件的有效性：** 重新打包，原来 `407KB` 的体积压缩为 `108KB`

### 6、DllPlugin 动态链接库 `DllPlugin` 与 externals 的作用相似，都是将依赖抽离出去，节约打包时间。区别是 DllPlugin 是将依赖单独打包，这样以后每次只构建业务代码，而 externals 是将依赖转化为 CDN 的方式引入当公司没有很好的 CDN 资源或不支持 CDN 时，就可以考虑使用 DllPlugin ，替换掉 externals DllPlugin 配置流程大致分为三步： 1）创建 dll.config.js 配置文件 ``` import { DllPlugin } from "webpack"; export default { // 需要抽离的依赖 entry: { vendor: ["vue", "vue-router", "axios", "echarts"] }, mode: "production", optimization: { splitChunks: { cacheGroups: { vendor: { chunks: "all", name: "vendor", test: /node_modules/ } } } }, output: { filename: "[name].dll.js", // 输出路径和文件名称 library: "[name]", // 全局变量名称：其他模块会从此变量上获取里面模块 path: AbsPath("dist/static") // 输出目录路径 }, plugins: [ new DllPlugin({ name: "[name]", // 全局变量名称：减小搜索范围，与output.library结合使用 path: AbsPath("dist/static/[name]-manifest.json") // 输出目录路径 }) ] }; ``` 2）package.json 配置脚本 ``` "build:dll": "webpack --config ./dll.config.js", ``` 3）使用 `DllReferencePlugin` 将打包生成的dll文件，引用到需要的预编译的依赖上来，并通过 `html-webpack-tags-plugin` 在打包时自动插入dll文件 vue.config.js 配置如下 ``` import { DllReferencePlugin } from "webpack"; import HtmlTagsPlugin from "html-webpack-tags-plugin"; export default { configureWebpack: { plugins: [ new DllReferencePlugin({ manifest: AbsPath("dist/static/vendor-manifest.json") // manifest文件路径 }), new HtmlTagsPlugin({ append: false, // 在生成资源后插入 publicPath: "/", // 使用公共路径 tags: ["static/vendor.dll.js"] // 资源路径 }) ] } }; ``` 先运行 `npm run build:dll` 打包生成依赖文件，以后只用运行 `npm run build` 构建业务代码即可 ## 优化总结经过上面的一系列优化，可以看到： - 包体积由原来的 `2.25M` 减少到 `407KB`，压缩了82% - 打包速度由原来的 `25386ms`减少到 `8949ms`，提升了65% 这些方式虽然很常规，但确实可以有效地提升项目的性能本文主要介绍的是 **项目打包构建方面** 的优化方式，下一篇聊一聊 **业务代码层面** 的性能优化，其中会有很多有趣的方案 ## 文章系列文章系列地址：[github.com/xy-sea/blog](https://github.com/xy-sea/blog) 文中如有错误或不严谨的地方，请给予指正，十分感谢。如果喜欢或有所启发，欢迎 star