打包构建优化

最近沉迷逛某蓝色软件，收益良多！万分感谢博主 海阔_天空，写的太棒了

下面是原文链接，我在原文的基础上浅做个笔记，方便个人快速复习

PS：本篇文章在评论区里存在很多吐槽技术太老不够全面的问题，但是对于我来说，了解这些我以前不了解的技术还是很有收获的，哪怕我不会用他，重点是思路呀，所以很感谢博主愿意分享

前端性能优化——包体积压缩82%、打包速度提升65% - 掘金压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些常规且有效的性能优化建议https://juejin.cn/post/7186315052465520698

目录

Vue 分析打包文件的两种方式

--report

webpack-bundle-analyzer

初始打包速度、初始打包体积

优化过程

使用 externals 提取公共依赖

分析公共依赖有哪些

在 vue.config.js 中，配置 externals

验证 externals 优化效果

组件库按需引入

为什么不用 externals 处理组件库呢？

使用 babel-plugin-component 按需引入组件库

验证 组件库按需引入 优化效果

减小三方依赖的体积（比如删除多余语言包）

使用 moment-locales-webpack-plugin 删除无用语言包

验证 删除第三方依赖多余语言包 优化效果

HappyPack 多线程打包（古早方法）

使用 HappyPack 实现多线程打包

验证 HappyPack 多线程打包 优化效果

Gzip 压缩

使用 compression-webpack-plugin 开启 gzip

验证 Gzip 压缩 优化效果

DllPlugin 动态链接库（古早方法）

精彩评论区

---

Vue 分析打包文件的两种方式

压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节

项目背景：

• 技术栈：Vue-cli3 + Vue2 + Webpack4
• 插件：ElementUI + ECharts + Axios + Momentjs

--report

Vue 项目可以通过添加 --report 命令 来分析各文件的大小，打包后，在 dist 目录会生成 report.html 文件

"build": "vue-cli-service build --report"，

webpack-bundle-analyzer

也可以通过安装 webpack-bundle-analyzer 插件来分析：

npm install webpack-bundle-analyzer

在 vue.config.js 中引入

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

启动项目，在浏览器打开 http://127.0.0.1:8888/ 就能看到分析页面

npm run serve

初始打包速度、初始打包体积

初始打包速度：25386 ms

初始体积：2.25 MB

优化过程

使用 externals 提取公共依赖

分析公共依赖有哪些

从上面的 打包分析页面 中可以看到，chunk-vendors.js 体积为 2.21M，其中体积大的几个文件是公共依赖包

• vue
• vue-router
• axios
• echarts

只要把公共依赖包提取出来，不再打到 chunk-vendors.js 里，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals 告诉 webpack：打包时忽略外部环境提供的依赖

在 vue.config.js 中，配置 externals

在 vue.config.js 中配置

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

在 index.html 中，使用 CDN 引入依赖（PS：公共 CDN 不够稳定，建议使用公司内网服务器存放 CDN 资源）

验证 externals 优化效果

配完 externals 后，重新打包，数据如下：

打包速度：18879 ms

打包体积：1.12 MB

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

组件库按需引入

为什么不用 externals 处理组件库呢？

组件库按需引入的原理：只引入 指定组件 及其对应的样式

externals 直接在 html 内引入，只能引入组件库完整的 js 和 css，失去 按需引入 的功能

使用 babel-plugin-component 按需引入组件库

elementUI 需要借助 babel-plugin-component 插件，实现组件按需引入

安装插件

npm install babel-plugin-component -D

在 babel.config.js 中引入下方配置：

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

完成上述操作后，按需引入 Button 组件：

import { Button } from 'element-ui'

Vue.component(Button.name, Button)

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

得出结论：通过该插件，最终只引入指定组件和样式，可以减少组件库体积大小

验证 组件库按需引入 优化效果

打包速度：15135 ms

打包体积：648 KB

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

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

减小三方依赖的体积（比如删除多余语言包）

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

使用 moment-locales-webpack-plugin 删除无用语言包

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

npm install moment-locales-webpack-plugin -D

vue.config.js 中引入

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

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

验证 删除第三方依赖多余语言包 优化效果

打包速度：10505 ms

打包体积：407 KB

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

HappyPack 多线程打包（古早方法）

运行在 Node.js 上的 Webpack 是 单线程 的，HappyPack 能实现 Webpack 多线程 打包

HappyPack 把任务分解，让多个子进程并发处理，执行完后 再把结果发送给主进程，进而提升打包速度

使用 HappyPack 实现多线程打包

npm install HappyPack -D

在 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 多线程打包 优化效果

打包速度：8949 ms

使用 HappyPack 后，打包速度进一步提升了 65%

越是复杂的项目，HappyPack 对打包速度的提升越明显

Gzip 压缩

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

线上项目为了 把服务端响应文件的体积尽量减小，优化返回速度，可以通过两种方式：

• 使用构建工具 Webpack 插件，来开启 http 传输的 gzip 压缩
• 服务端配置 nginx，来开启 http 传输的 gzip 压缩

使用 compression-webpack-plugin 开启 gzip

npm install compression-webpack-plugin -D

在 vue.config.js 中，添加配置

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

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

验证 Gzip 压缩 优化效果

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

DllPlugin 动态链接库（古早方法）

前端性能优化——包体积压缩82%、打包速度提升65% - 掘金压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些常规且有效的性能优化建议https://juejin.cn/post/7186315052465520698#heading-8

精彩评论区

再次鸣谢博主 海阔_天空，写的太棒了