webpack的性能优化（二）——减少打包体积

        优化webpack性能时，主要集中在两个方面：优化构建后的结果和优化构建时的速度。前一篇文章已经介绍了如何通过webpack的分包来优化构建后的结果。而在本篇文章中，我们将从减少打包体积的角度来探讨。

1.通过CDN链接引入第三方库

        CDN是指通过相互连接的网络系统，利用最靠近每个用户的服务器，以更快、更可靠的方式将音乐、图片、视频、应用程序以及其他文件发送给用户，从而实现高性能、可扩展性和低成本的网络内容传递。

平时在开发中我们使用CDN主要有两种方式：

  • 将打包的所有静态资源，放到CDN服务器。让用户所有资源都是通过CDN服务器加载。
  • 通过利用知名第三方库的CDN，我们可以避免将这些库打包到我们的项目中，从而降低打包体积。

本文的重点是减少打包体积，因此我们将重点讨论第二种方式。

  • 步骤一：首先通过在webpack.config.js中的配置排除对这些库的打包
  // webpack.config.js
const { resolve } = require('path');module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: resolve(__dirname, 'build'),},// 排除打包dayjsexternals: {lodash: '_',},
};

强调：在externals这个对象中

  1. lodash 作为属性名（key）： 这表示当你在代码中导入 lodash 时，实际上不会将 lodash 包含在你的输出文件中，而是期望它在运行时从外部引入。
  2. '_' 作为属性值（value）： 假定在运行环境中已经有一个全局的 _ 对象或者模块 

外部扩展(Externals) | webpack 中文文档 (docschina.org)

  • 步骤二：在html模块中，加入第三方库的CDN服务器地址

推荐一个国内比较好用的CDN是 bootcdn

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入第三方库的CDN --><script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script></script>
</head>
<body></body>
</html>

2. 代码压缩

2.1 JavaScript的压缩

        压缩JavaScripte文件可以使用Terser压缩工具，Terser可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小。webpack v5 开箱即带有最新版本的 terser-webpack-plugin。

        在Webpack中，有一个名为minimizer属性，它在生产模式下默认开启，使用TerserPlugin来处理代码。这意味着Webpack会自动使用TerserPlugin来压缩和优化JavaScript代码，以减小文件大小并提高性能。

        如果你不满意默认配置，你可以自己创建TerserPlugin的实例，并覆盖相关配置。这允许你根据项目的需求自定义代码压缩和优化，使Webpack配置变得灵活而适应各种场景。总之，minimizer属性允许你控制生产模式下的代码压缩，提供了定制化的选项以满足你的需求。

  optimization: {minimize: true,minimizer: [new TerserPlugin({extractComments: true, //默认值为true，表示会将注释抽取到一个单独的文件中；parallel: true, //使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认os.cpus().length - 1；//在这里设置tenser相关的配置terserOptions: {// 设置压缩相关的代码compress:{ecma: 5,  // 设置输出所需的EcmaScript标准版本unused: false // 是否删除未引用的函数和变量arrows: true, //class或者object中的函数，转换成箭头函数dead_code: true //移除不可达的代码（tree shaking）},toplevel: true, // 是否转换顶级作用域中声明的名称。keep_classnames: true, // 保留类名,keep_fnames: true // 保留函数的名称}})],},

这里面的配置非常多，具体可以看terser文档 

2.2 css的压缩

压缩CSS通常是去除无用的空格等，，因为很难去修改选择器、属性的名称、值等。压缩CSS可以使用webpack的一个插件：css-minimizer-webpack-plugin

  • 第一步，安装 css-minimizer-webpack-plugin： 
npm install css-minimizer-webpack-plugin -D
  • 第二步，在optimization.minimizer中配置
optimization: {minimizer: [new cssMinimizerPlugin({parallel: true})],},

2.3 HTTP的压缩

         HTTP压缩 是一种内置在 服务器 和 客户端 之间的，以改进传输速度和带宽利用率的方式；
HTTP压缩的流程:
  • 第一步：HTTP数据在服务器发送前就已经被压缩了；（可以在webpack中完成）
  • 第二步：兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式；

  • 第三步：服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器；
第一步对HTTP进行压缩怎么实现 ？

2.3.1 Webpack对文件压缩

可以使用 CompressionPlugin 。
  • 第一步，安装CompressionPlugin： 
npm install compression-webpack-plugin -D
第二步，使用 CompressionPlugin 即可 
plugins: [// 生产环境new CompressionPlugin({test: /\.(css|js)$/i, // 匹配哪些文件需要压缩threshold: 0, // 设置文件从多大开始压缩minRatio: 0.8, // 至少的压缩比例algorithm: "gzip", // 采用的压缩算法// exclude// include}),]

2.3.2 HTML文件中代码的压缩

我们之前使用了  HtmlWebpackPlugin  插件来生成HTML的模板，事实上它还有一些其他的配置：
  • inject：设置打包的资源插入的位置 true、 false 、body、head
  • cache：设置为true，只有当文件改变时，才会生成新的文件（默认值也是true）
  • minify：默认会使用一个插件html-minifier-terser
plugins: [new HtmlWebpackPlugin({template: "./index.html",// inject: "body"cache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存minify: isProduction ? {removeComments: false, // 是否要移除注释removeRedundantAttributes: false, // 是否移除多余的属性removeEmptyAttributes: true, // 是否移除一些空属性collapseWhitespace: false,removeStyleLinkTypeAttributes: true,minifyCSS: true,minifyJS: {mangle: {toplevel: true}}}: false}),],

5. Tree Shaking

        Tree Shaking  是一个术语，在计算机中表示 消除死代码（dead_code） ，最早的想法起源于LISP，用于 消除未调用的代码 （纯函数无副作用，可以放心的消除，这也是为什么要求我们在进
行函数式编程时，尽量使用纯函数的原因之一），后来 Tree Shaking 也被应用于其他的语言，比如JavaScript、Dart；

5.1 JavaScript的Tree Shaking

  • 对JavaScript进行Tree Shaking是源自打包工具rollup；
  • 这是因为Tree Shaking依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）；
  • webpack2正式内置支持了ES2015模块，和检测未使用模块的能力；
  • 在webpack4正式扩展了这个能力，并且通过 package.json的 sideEffects属性作为标记，告知webpack在编译时， 哪里文件可以安全的删除掉；
  • webpack5中，也提供了对部分CommonJS的Tree Shaking的支持； https://github.com/webpack/changelog-v5#commonjs-tree-shaking

5.2 webpack实现Tree Shaking

事实上webpack实现Tree Shaking采用了两种不同的方案：

  • usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的；
  • sideEffects：直接查看该文件是否有副作用，如果没有副作用，并且没有被使用则直接删除该模块；

5.2.1 usedExports

将mode设置为development模式：
  • 为了可以看到 usedExports带来的效果，我们需要设置为 development 模式
  • 因为在 production 模式下，webpack默认的一些优化会带来很大额影响。
设置 usedExports 为true和false对比打包后的代码：
  • 在usedExports设置为true时，会有一段注释：unused harmony export mul；
  • 这段注释的意义是什么呢？告知Terser在优化时，可以删除掉这段代码；
这个时候，我们将  minimize 设置true（利用Terser对JavaScript进行压缩）：
  • usedExports设置为false时，mul函数没有被移除掉；
  • usedExports设置为true时，mul函数被移除掉；
所以， usedExports 实现 Tree Shaking 是结合 Terser 来完成的。

5.2.2 sideEffects

sideEffects 用于告知webpack compiler哪些模块是没有有副作用的：
  • 副作用的意思是这里面的代码有执行一些特殊的任务（比如这个模块中修改了全局变量），不能仅仅通过export来判断这段代码的意义；
在 package.json 中设置 sideEffects 的值：
  • 将sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports；
  • 如果有一些模块是有副作用，一些模块是没有副作用的，可以设置为数组；

package.json

"sideEffects": false, // 全部的模块都没有副作用
"sideEffects": ["./src/format.js", "*.css" ], //这两个文件没有副作用在没有被使用时可以放心的删除
比如我们有一个format.js、style.css文件：
  • 在sideEffects中指定这两个文件无副作用；
  • 该文件在导入时没有使用任何的变量来接受，这两个文件的内容没有被其他模块使用；
  • 那么打包后的文件，不会保留format.js、style.css相关的任何代码；
还可以通过 module.rules 来配置： 
module: {rules: [{test: /\.css/i,use: [isProduction ? MiniCssExtractPlugin.loader: "style-loader", "css-loader"],sideEffects: true},],},

参考:

webpack性能优化（二）：减少打包体积 - 掘金 (juejin.cn)

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于Python编程实现简单网络爬虫实现

基于Python编程实现简单网络爬虫实现

引言 网络爬虫&#xff08;英语&#xff1a;web crawler&#xff09;&#xff0c;也叫网络蜘蛛&#xff08;spider&#xff09;&#xff0c;是一种用来自动浏览万维网的网络机器人。其目的一般为编纂网络索引。 --维基百科 网络爬虫可以将自己所访问的页面保存下来&#xff0c…
阅读更多...
python 通过定时任务执行pytest case

python 通过定时任务执行pytest case

这段Python代码使用了schedule库来安排一个任务&#xff0c;在每天的22:50时运行。这个任务执行一个命令来运行pytest&#xff0c;并生成一个报告。 代码开始时将job_done变量设为False&#xff0c;然后运行预定的任务。一旦任务完成&#xff0c;将job_done设置为True并跳出循…
阅读更多...
Netty-Netty实现自己的通信框架

Netty-Netty实现自己的通信框架

通信框架功能设计 功能描述 通信框架承载了业务内部各模块之间的消息交互和服务调用&#xff0c;它的主要功能如下&#xff1a; 基于 Netty 的 NIO 通信框架&#xff0c;提供高性能的异步通信能力&#xff1b; 提供消息的编解码框架&#xff0c;可以实现 POJO 的序列化和反…
阅读更多...
AI智能分析网关V4烟火检测算法解决方案

AI智能分析网关V4烟火检测算法解决方案

一、背景需求 根据国家消防救援局公布的数据显示&#xff0c;2023年共接报处置各类警情213.8万起&#xff0c;督促整改风险隐患397万处。火灾危害巨大&#xff0c;必须引起重视。传统靠人工报警的方法存在人员管理难、场地数量多且分散等问题&#xff0c;无法有效发现险情降低…
阅读更多...
【量化交易故事】小明开启了量化创业之旅-01

【量化交易故事】小明开启了量化创业之旅-01

故事开始于2023年的春天&#xff0c;小明是一位对金融市场充满热情的IT工程师。在经历了数次基于主观判断和个人情绪进行投资却收获平平后&#xff0c;他意识到传统交易方式中的人为因素难以避免&#xff0c;而这往往成为影响投资决策稳定性和准确性的关键障碍。在一次偶然的机…
阅读更多...
以太网抓包软件Wireshake应用介绍( SMART PLC MODBUSTCP通信)

以太网抓包软件Wireshake应用介绍( SMART PLC MODBUSTCP通信)

首先介绍下常看到的字符ACK,ACK是确认字符，在数据通信中，接收站发给发送站的一种传输类控制字符，表示发来的数据已确认接收无误。在TCP/IP协议中，如果接收方成功的接收到数据，会回复一个ACK数据。通常ACK信号有自己固定的格式，长度大小，由接收方回复给发送方。ACK在TCP的…
阅读更多...
dcm数据格式转nrrd数据格式（2维转3维）

dcm数据格式转nrrd数据格式（2维转3维）

目的 将dcm数据格式&#xff08;2D&#xff09;转成nrrd数据格式&#xff08;3D&#xff09; 将一个文件夹下的dcm数据转成一个nrrd数据 代码 1. 安装必要包 pip install SimpleITK2. 上代码 Descripttion: Result: Author: Philo Date: 2024-01-10 14:25:49 LastEditors: …
阅读更多...
【MySQL】基础篇

【MySQL】基础篇

文章目录 一、SQL规则与规范二、基本的SELECT语句SELECT...FROM...;列的别名 AS ""去除重复行 DISTINCT空值参与运算 结果一定也为NULL着重号 常量描述表结构 DESCRIBE过滤数据 WHERE 三、运算符算术运算符比较运算符非符号类型运算符逻辑运算符运算符优先级 四、排序…
阅读更多...
前端js写数据结构与算法

前端js写数据结构与算法

1、什么是数据结构与算法 数据结构&#xff1a;是指数据对象中数据元素之间的相互关系。包括集合结构、线性结构、树形结构、图形结构。 算法&#xff1a;解决问题的思路。 2、时间复杂度 1.是什么? 执行当前算法所“花费的时间” 2.干什么? 在写代码的过程中&#xf…
阅读更多...
浅学Linux之旅 day1 学习路线及计算机入门知识介绍

浅学Linux之旅 day1 学习路线及计算机入门知识介绍

我不要做静等被掀起的轻波&#xff0c;我要生起翠绿的斑驳 偶尔过季的遭遭人事化长风拂过 思绪撕碎点燃了火 ——24.1.14 一、Linux学习路线 ①计算机入门知识介绍 ②Linux系统概述 ③Linux系统的安装和体验 ④Linux的网络配置和连接工具 ⑤Linux的目录结构 ⑥Linux的常用命令 …
阅读更多...
【docker笔记】docker镜像

【docker笔记】docker镜像

是什么 是一种轻量级、可执行的独立软件包&#xff0c;它包含运行某个软件所需的所有内容&#xff0c;我们把应用程序和配置依赖打包好形成一个可交付的运行环境&#xff08;包括代码、运行时需要的库、环境变量和配置文件等&#xff09;&#xff0c;这个打包好的运行环境就是…
阅读更多...
HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听

HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听

HarmonyOS应用开发学习笔记 arkTS自定义弹窗&#xff08;CustomDialog&#xff09;简单使用 1、CustomDialog装饰器用于装饰自定义弹框 1、定义弹出框 CustomDialog CustomDialog export struct CustomDialogExample {controller: CustomDialogControllerbuild() {Column() {…
阅读更多...
mac vscode latex实用

mac vscode latex实用

网上有教程怎么在vscode里安装macTex以及插件&#xff0c;然后就可以在latex里写代码了&#xff0c;这里需要修改的是对应的json文件&#xff0c;输入command P,可以看到最近打开的json设置文件&#xff0c;结果如下 然后设置这个json文件&#xff0c;我的json文件设置如下 …
阅读更多...
springcloud微服务分布式 springboot+vue的轻院校园网购商城管理系统 Eureka

springcloud微服务分布式 springboot+vue的轻院校园网购商城管理系统 Eureka

本文的研究目标是以商城的轻院网购商城管理体系为对象&#xff0c;论文的研究内容包括&#xff1a;商品信息、系统公告等方面进行了研究。系统以当前应用最为广泛的Java语言为基础&#xff0c;结合了目前应用最为广泛的嵌入式嵌入式平台&#xff0c;集成了B/S体系结构。数据库选…
阅读更多...
Tensor Core的一些概念理解

Tensor Core的一些概念理解

英伟达的GPU产品架构发展如下图&#xff0c;Tensor Core是从2017年的Volta架构开始演变的针对AI模型大量乘加运算的特殊处理单元。本文主要梳理一些关于Tensor Core的一些基础概念知识。 什么是混合精度&#xff1f; 混合精度在底层硬件算子层面&#xff0c;使用半精度&#xf…
阅读更多...
墙地砖外形检测的技术方案-图像获取

墙地砖外形检测的技术方案-图像获取

硬件系统 墙地砖外形检测硬件系统主要由工业相机、光源、瓷砖位置检测电路和上位机组成&#xff0c;其结构如图所示。为了提高系统检测精度和稳定性&#xff0c;系统采用的是较高精度的高速工业相机用于抓取墙地砖表面轮廓图像&#xff0c;图像数据通过USB接口向上位机传送&am…
阅读更多...
阿里云服务器的tcp端口无法访问(云服务厂家问题？)

阿里云服务器的tcp端口无法访问(云服务厂家问题？)

问题->无法访问 阿里云服务器的tcp端口 最近一台阿里云服务器的一个端口61616无法访问&#xff0c;在服务器内用外网地ip发现无法访问&#xff0c;用内网ip访问是正常的&#xff0c;通过技术排查&#xff1a; 解决->无法访问 阿里云服务器的tcp端口 1 配置官网的安全组…
阅读更多...
c++学习笔记-STL案例-演讲比赛管理系统2

c++学习笔记-STL案例-演讲比赛管理系统2

目录 功能介绍 代码结构部分 查看一下类图 1.Speaker.h 2.speechManager.h 3.speechManager.cpp 4.演讲比赛流程关系系统.cpp 功能介绍 speechManager.h函数包含演讲比赛流程的所有功能如下&#xff1a; 开始演讲比赛&#xff1a;完成整届比赛的流程&#xff0c;每…
阅读更多...
数据结构.线性表（2）

数据结构.线性表（2）

一、模板 例子&#xff1a; a: b: 二、基本操作的实现 &#xff08;1&#xff09;初始化 &#xff08;2&#xff09;销毁和清空 &#xff08;3&#xff09;求长度和判断是否为空 &#xff08;4&#xff09;取值 &#xff08;5&#xff09;查找 &#xff08;6&#xff09;插入 &…
阅读更多...
【期末考试】数据库综合复习宝典

【期末考试】数据库综合复习宝典

目录 第一章 数据库系统概述 第二章 关系代数 第四章 关系数据库理论 第五章 数据库设计 第六章 数据库管理系统 第八章 事务管理 第一章 数据库系统概述 1.1三级模式 ①外模式&#xff1a;它为特定的应用程序或用户群体提供了一个数据视图&#xff0c;这个视图是独立于…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023