打包构建优化

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

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

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 资源）

  <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 优化效果

配完 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

精彩评论区

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/7179.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

常见密码的编码

常见密码的编码

1.base64编码 字符包括字母A-Z、a-z、数字0-9&#xff0c;这样共有62个字符 当看到号的加密方式时&#xff0c;可以考虑base64。例&#xff1a;cTZ1NQ解码之后为q5u5。 bash32 只有大写字母&#xff08;A-Z&#xff09;和数字234567 bash64 只有数字0-9以及大写字母ABCDE…
阅读更多...
Java 网络编程之NIO(Channel)

Java 网络编程之NIO(Channel)

同步 VS 异步 同步 同步编程是指当程序执行某个操作时&#xff0c;它必须等待该操作完成才能继续执行下一个操作。这意味着程序在执行网络请求时必须等待网络请求完成才能继续执行下一步操作&#xff0c;因此同步编程通常会导致程序的性能降低。在网络编程中&#xff0c;同步编…
阅读更多...
【分享】免梯子的GPT，玩 ChatGPT 的正确姿势

【分享】免梯子的GPT，玩 ChatGPT 的正确姿势

火了一周的 ChatGPT&#xff0c;HG 不允许还有小伙伴不知道这个东西是什么&#xff1f;简单来说就是&#xff0c;你可以让它扮演任何事物&#xff0c;据说已经有人用它开始了颜色文学创作。因为它太火了&#xff0c;所以&#xff0c;本周特推在几十个带有“chatgpt”的项目中选…
阅读更多...
基于YOLOv5的水下海洋目标检测

基于YOLOv5的水下海洋目标检测

摘要&#xff1a;水下海洋目标检测技术具有广泛的应用前景&#xff0c;可以用于海洋环境监测、海洋资源开发、海洋生物学研究等领域。本文提出了一种基于 YOLOv5 的水下海洋目标检测方法&#xff0c;使用数据增强方法进行了大量实验&#xff0c;并与其他方法进行了对比&#xf…
阅读更多...
postgres 日志级别要设置成 wal_level = logical 的影响？ 物理复制和逻辑复制

postgres 日志级别要设置成 wal_level = logical 的影响？ 物理复制和逻辑复制

物理复制和逻辑复制 物理复制和逻辑复制 概念 WAL 区别 逻辑复制 将 PostgreSQL 的日志级别设置为 wal_level logical 会启用逻辑复制&#xff08;logical replication&#xff09;功能&#xff0c;这对于一些应用场景非常有用。 逻辑复制是一种高级的复制技术&#x…
阅读更多...
Leetcode.1017 负二进制转换

Leetcode.1017 负二进制转换

题目链接 Leetcode.1017 负二进制转换 Rating &#xff1a; 1698 题目描述 给你一个整数 n&#xff0c;以二进制字符串的形式返回该整数的 负二进制&#xff08;base -2&#xff09;表示。 注意&#xff0c;除非字符串就是 "0"&#xff0c;否则返回的字符串中不能含…
阅读更多...
ClickHouse小记

ClickHouse小记

1、ClickHouse简介 ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用 C 语言编写&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;&#xff0c;能够使用 SQL 查询实时生成分析数据报 告。 官网&a…
阅读更多...
该死，面试里怎么有那么多套路，我离字节只有一步之遥

该死，面试里怎么有那么多套路，我离字节只有一步之遥

自我介绍 不要想着简历上都有为什么还要自我介绍&#xff0c;这里主要考查的是求职者的表达能力和基本素质。重点体现自己的经历优势以及主动积极的态度。 从业时间&#xff0c;教育背景&#xff0c;工作经验&#xff0c;擅长技能&#xff0c;你的性格。 个人技能&#xff1a…
阅读更多...
用BEM和现代CSS选择器控制级联

用BEM和现代CSS选择器控制级联

本文为 360 奇舞团前端工程师翻译原文标题&#xff1a;Taming the Cascade With BEM and Modern CSS Selectors原文作者&#xff1a;Liam Johnston原文地址&#xff1a;https://css-tricks.com/taming-the-cascade-with-bem-and-modern-css-selectors/BEM。就像前端开发领域的所…
阅读更多...
免费且好用的ssh工具FinalShell的下载与安装

免费且好用的ssh工具FinalShell的下载与安装

一、FinalShell介绍 1.1 特色功能 云端同步,免费海外服务器远程桌面加速,ssh加速,本地化命令输入框,支持自动补全,命令历史,自定义命令参数。 1.2 主要特性 1.多平台支持Windows,macOS,Linux&#xff1b; 2.多标签,批量服务器管理&#xff1b; 3.支持登录ssh和Windows远程桌…
阅读更多...
页面预加载优化实践

页面预加载优化实践

概述在客户端开发中&#xff0c;列表类型页面大多都依赖网络请求&#xff0c;需要等网络数据请求下来后再刷新页面。但遇到网络请求慢的场景&#xff0c;就会导致页面加载很慢甚至加载失败。我负责会员的商品列表页面&#xff0c;在业务场景中&#xff0c;页面元素比较复杂&…
阅读更多...
【从零开始学习 UVM】10.2、UVM TLM —— UVM TLM Blocking Put Port

【从零开始学习 UVM】10.2、UVM TLM —— UVM TLM Blocking Put Port

文章目录 UVM TLM Port Example1. 创建一个发送器类，其端口类型为 uvm_blocking_put_port2. 创建一个接收器类，实现 put 方法。3. 在更高层次上连接端口及其实现Put Port 阻塞行为任何组件都可以通过 TLM put port向另一个组件发送事务。接收组件应该定义 put port的实现。这…
阅读更多...
KDWS-24便携式六氟化硫气体微量水份测定仪

KDWS-24便携式六氟化硫气体微量水份测定仪

一、技术特点 (1)自校准&#xff1a;传感器探头可自动校准零点&#xff0c;自动消除因零点、漂移而引入的系统误差&#xff0c;保证每次测量的准确性&#xff0c;同时可免去每年校验的繁琐。 (2)快速省气&#xff1a;开机进入测量状态后每SF6气隔露点测定时间为2min左右。 (3)…
阅读更多...
【动手学习深度学习笔记】

【动手学习深度学习笔记】

第二章预备知识 节省内存&#xff1a;使⽤切⽚表⽰法将操作的结果分配给先前分配的数组 Z[:] XY就可以把结果覆盖在Z的原内存上&#xff0c;而不是新开辟内存&#xff0c;就节省了内存了 处理缺失值 inputs,outputs data.iloc[:,0:2],data.iloc[:,2] # iloc为位置索引 in…
阅读更多...
rk3568 Android 添加IR遥控器

rk3568 Android 添加IR遥控器

rk3568 添加IR遥控器 生活中充满了各种波长的电磁波&#xff0c;所谓的可见(色)光就是人眼可见的电磁波谱&#xff0c;其波长为 380~770nm&#xff0c;为了避免遥控器发射的光造成人眼不适及减少一般人造光源干扰&#xff0c;故选用人眼不可见的红外线(Infrared)波长&#xff…
阅读更多...
Python 基础（六）：基本数据类型

Python 基础（六）：基本数据类型

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录一、字符串类型&#xff08;str&#xff09;1.1、引号嵌套1.2、转义字符1.3、改变大小写…
阅读更多...
（论文加源码）基于deap数据集的transformer结合注意力机制脑电情绪识别

（论文加源码）基于deap数据集的transformer结合注意力机制脑电情绪识别

本篇论文是2021年新发表的一篇论文。也是目前有源码的论文中唯一一篇使用transformer模型和注意力机制的论文源码&#xff08;pytorch和tensorflow版本均有&#xff09; 论文及源码见个人主页&#xff1a; https://download.csdn.net/download/qq_45874683/87658878 &#xf…
阅读更多...
ROS 2（二）熟悉ROS 2的使用和工具（turtlesim\ros2\rqt）

ROS 2（二）熟悉ROS 2的使用和工具（turtlesim\ros2\rqt）

参考内容&#xff1a;http://docs.ros.org/en/humble/Tutorials/Beginner-CLI-Tools/Introducing-Turtlesim/Introducing-Turtlesim.html 1.简介 Turtlesim是一个用于学习ROS 2的轻量级模拟器。它说明了ROS 2在最基本的层面上所做的事情&#xff0c;便于了解以后如何处理真实的…
阅读更多...
【面试】MyBatis面试题

【面试】MyBatis面试题

文章目录MyBatis简介MyBatis是什么&#xff1f;Mybatis优缺点Hibernate 和 MyBatis 的区别ORM是什么为什么说Mybatis是半自动ORM映射工具&#xff1f;它与全自动的区别在哪里&#xff1f;传统JDBC开发存在什么问题&#xff1f;JDBC编程有哪些不足之处&#xff0c;MyBatis是如何…
阅读更多...
【01 Capture Framework】

【01 Capture Framework】

HAL3的Capture主要由HwNode中的P2CaptureNode以及其中的sub module来完成。 1. P2CaptureNode Overview P2CaptureNode也是继承自BaseNode以及IPipelineNode。其中组件主要有： 其中， P2CaptureNode：属于HwNode，重写了父类的init/config/queue/flush接口； P2CaptureProce…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发