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.rhkb.cn/news/237983.html

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

相关文章

Linux------进程的初步了解

Linux------进程的初步了解

目录 一、什么是进程 二、进程的标识符pid 三、getpid 得到进程的PID 四、kill 终止进程 五、父进程与子进程 六、目录中的进程 一、什么是进程 在windows中&#xff0c;我们查看进程很简单&#xff0c;打开任务管理器&#xff0c;就可以看到在运行的进程。这里我们还可以…
阅读更多...
【用法总结】无障碍AccessibilityService

【用法总结】无障碍AccessibilityService

一、背景 本文仅用于做学习总结&#xff0c;转换成自己的理解&#xff0c;方便需要时快速查阅&#xff0c;深入研究可以去官网了解更多&#xff1a;官网链接点这里 之前对接AI语音功能时&#xff0c;发现有些按钮&#xff08;或文本&#xff09;在我没有主动注册唤醒词场景…
阅读更多...
原生js实现拖拽效果

原生js实现拖拽效果

<!DOCTYPE html> <html> <head> <style> #mydiv { width: 200px; height: 200px; background-color: red; position: absolute; cursor: move; } </style> | </head> <body> <div id"mydiv">拖拽我…
阅读更多...
PostgreSQL认证考试PGCA、PGCE、PGCM

PostgreSQL认证考试PGCA、PGCE、PGCM

PostgreSQL认证考试PGCA、PGCE、PGCM 【重点&#xff01;重点&#xff01;重点&#xff01;】PGCA、PGCE、PGCM 直通车快速下正&#xff0c;省心省力&#xff0c;每2个月一次考试 PGCE考试通知 &#xff08;2024&#xff09; 一、考试概览 &#xff08;一&#xff09; 报名要…
阅读更多...
k8s存储卷之动态

k8s存储卷之动态

动态pv需要两个组件 1、卷插件&#xff0c;k8s本身支持的动态pv创建不包含NFS&#xff0c;需要声明和安装一个外部插件 Provisioner 存储分配器&#xff0c;动态创建pv&#xff0c;然后根据pvc的请求自动绑定和使用 2、StorageClass&#xff0c;用来定义pv的属性&#xff0c…
阅读更多...
unity小程序websocket：nginx配置https (wss)转http (ws)及其他问题解决

unity小程序websocket：nginx配置https (wss)转http (ws)及其他问题解决

目录 前言 实际运用场景 处理流程如下 nginx配置ssl和wss 配置过程中遇到的问题 1、无法连接服务器 2、通过IP可以访问&#xff0c;域名却不行 问题描述 解决 3、如何判断该域名是否备案了 前言 为了服务器网络的通用性&#xff0c;我们在实现移动端的游戏转微信小程序…
阅读更多...
网络地图服务（WMS）详解

网络地图服务（WMS）详解

文章目录 1.概述2.GetCapabilities3.GetMap4.GetFeatureInfo 阅读本文之前可参考前文&#xff1a;《地图服务器GeoServer的安装与配置》与《GeoServer发布地图服务&#xff08;WMS、WFS&#xff09;》。 1.概述 经过前文的介绍&#xff0c;相信我们对WMS/WFS服务已经有了一个非…
阅读更多...
vue3.2引用unplugin-vue-components插入，解放开发中import组件

vue3.2引用unplugin-vue-components插入，解放开发中import组件

目录 前言引用unplugin-vue-components插件的优缺点优点缺点 unplugin-vue-components插件引入安装插件配置vite配置更新TypeScript配置使用代码位置 总结Q&A 前言 unplugin-vue-components是一个用于Vue.js项目的插件&#xff0c;特别适用于Vite和Webpack构建工具。它的主…
阅读更多...
PHP反序列化总结4--原生类总结

PHP反序列化总结4--原生类总结

原生类的简要介绍以及原生类和反序列化的关系 PHP 原生类指的是 PHP 内置的类&#xff0c;它们可以直接在 PHP 代码中使用且无需安装或导入任何库&#xff0c;相当于代码中的内置方法例如echo &#xff0c;print等等可以直接调用&#xff0c;但是原生类就是可以就直接php中直接…
阅读更多...
ES API 批量操作 Bulk API

ES API 批量操作 Bulk API

bulk 是 elasticsearch 提供的一种批量增删改的操作API。 bulk 对 JSON串 有着严格的要求。每个JSON串 不能换行 &#xff0c;只能放在同一行&#xff0c;同时&#xff0c; 相邻的JSON串之间必须要有换行 &#xff08;Linux下是\n&#xff1b;Window下是\r\n&#xff09;。bul…
阅读更多...
常见的加密算法

常见的加密算法

加密算法 AES 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥&#xff0c;具体的加密流程如下图&#xff1a; RSA RSA 加密算法是一种典型的非对称加密算法&am…
阅读更多...
阴盘奇门八字排盘马星位置计算方法php代码

阴盘奇门八字排盘马星位置计算方法php代码

如下位置&#xff0c;马星的四个位置。 计算方法&#xff1a; 1。先根据出生年月日&#xff0c;计算得八字四柱。比如 2024年01月09日&#xff0c;四柱为 其中时柱地支为“申” 2。然后根据以下对应的数组&#xff0c;来找到id号&#xff0c;即马星位置。 根据下表来找到&am…
阅读更多...
JS实现网页轮播图

JS实现网页轮播图

轮播图也称为焦点图&#xff0c;是网页中比较常见的网页特效。 1、页面基本结构&#xff1a; 大盒子focus&#xff0c;里面包含 左右按钮ul 包含很多个li &#xff08;每个li里面包含了图片&#xff09;下面有很多个小圆圈 因为我们想要点击按钮&#xff0c;轮播图左右播放&a…
阅读更多...
springboot——消息中间件

springboot——消息中间件

消息的概念 从广义角度来说&#xff0c;消息其实就是信息&#xff0c;但是和信息又有所不同。信息通常被定义为一组数据&#xff0c;而消息除了具有数据的特征之外&#xff0c;还有消息的来源与接收的概念。通常发送消息的一方称为消息的生产者&#xff0c;接收消息的一方称为…
阅读更多...
智能路由器中的 dns.he.net可使用自定义域名的免费 DDNS 服务配置方法

智能路由器中的 dns.he.net可使用自定义域名的免费 DDNS 服务配置方法

今天介绍的这个是可以使用自定义域名同时支持使用二级域名的免费DDNS服务 dns.he.net的动态DDNS服务的配置方法, 这个服务相对还是比较稳定的, 其配置也和其他的DDNS服务有些不太一样, 首先他的主机名: 这里需要设置为登录后分配的区域域名: ipv6.he.net 然后就是 DDNS 用户…
阅读更多...
docker 安装elasticsearch、kibana、cerebro、logstash

docker 安装elasticsearch、kibana、cerebro、logstash

安装步骤 第一步安装 docker 第二步 拉取elasticsearch、kibana、cerebro、logstash 镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.10.2 docker pull docker.elastic.co/kibana/kibana:7.10.2 docker pull lmenezes/cerebro:latest docker pull l…
阅读更多...
Android基于Matrix绘制PaintDrawable设置BitmapShader，以手指触点为中心显示原图像圆图，Kotlin（3）

Android基于Matrix绘制PaintDrawable设置BitmapShader，以手指触点为中心显示原图像圆图，Kotlin（3）

Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin&#xff08;3&#xff09; 在 Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin&#…
阅读更多...
大括号内两行公式中，如何左对齐公式的条件

大括号内两行公式中，如何左对齐公式的条件

1. 先建立一个大括号&#xff0c;中间设置一个二维矩阵如下&#xff1a; 2. 选中整个矩阵&#xff0c;不要选外面的括号&#xff0c;进行如下操作 3. 选择左侧对齐 即可。
阅读更多...
用LM Studio：2分钟在本地免费部署大语言模型，替代ChatGPT

用LM Studio：2分钟在本地免费部署大语言模型，替代ChatGPT

你想在本地使用类似ChatGPT 的大语言模型么&#xff1f;LM Studio 可以帮你2分钟实现ChatGPT的功能&#xff0c;而且可以切换很多不同类型的大语言模型&#xff0c;同时支持在Windows和MAC上的PC端部署。 LM Studio是一款面向开发者的友好工具&#xff0c;特别适合那些想要探索…
阅读更多...
华为 HarmonyOS 页面跳转

华为 HarmonyOS 页面跳转

HarmonyOS 页面跳转 1.新建页面2.添加跳转方法3.实现跳转效果 1.新建页面 我们新建2个页面(page)&#xff0c;一个Hello World页面&#xff0c;一个Hello HarmonyOS页面&#xff0c;注意修改红色框内容&#xff0c;保持一致 2.添加跳转方法 导入导入router模块&#xff0c;页…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023