如何减少 Webpack 的打包体积

前端面试题包括ECMScript,TypeScript,Nodejs,React,Webgl,Webpack,Threejs等还在整理中,在线地址前端面试题,源码地址大家多多支持才有动力给大家分享更多好的面试题。

  • 减少 Webpack 的打包体积是优化 Web 应用性能的重要步骤,尤其是在生产环境中。以下是几种常见的优化方式来减少 Webpack 打包输出的体积

使用生产模式(Production Mode)

  • Webpack 内置了 production 和 development 模式。production 模式会自动进行代码压缩、去除开发时的调试信息,并优化输出的代码。
module.exports = {mode: 'production',
};

代码压缩与丑化

  • 在生产模式下,Webpack 会默认使用 TerserPlugin 来压缩和丑化 JavaScript 文件,移除无用代码、空白符等,减少体积。
const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true, // 开启压缩minimizer: [new TerserPlugin()],},
};
  • 对于 CSS 文件,你可以使用 css-minimizer-webpack-plugin 来压缩:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin(),new CssMinimizerPlugin(), // 压缩CSS],},
};

Tree Shaking

  • Tree Shaking 是移除未使用的模块或代码的过程。Webpack 默认支持 ES6 模块的 Tree Shaking,在生产模式下自动启用。确保使用 ES6 模块 (import 和 export),并避免使用不支持 Tree Shaking 的 CommonJS 模块。
module.exports = {optimization: {usedExports: true, // 标记未使用的模块},
};

按需加载(Lazy Loading)

  • 通过代码分割,按需加载应用中不同的模块,以减少首次加载的包大小。这可以通过 Webpack 内置的 import() 动态导入语法实现。
// 按需加载某个模块
import('./module').then((module) => {module.doSomething();
});

使用第三方库的精简版本

  • Lodash 提供 lodash-es 版本以支持 Tree Shaking。
  • Moment.js 是一个体积较大的库,可以通过 moment/min/moment.min.js 使用压缩版本,或直接替换为较小的日期库如 dayjs。

移除不必要的 polyfill

  • 如果使用了 Babel 进行编译,可以通过 @babel/preset-env 结合 useBuiltIns 选项只导入目标环境所需的 polyfill,以避免将所有 polyfill 导入。
npm install @babel/preset-env core-js
// .babelrc
{"presets": [["@babel/preset-env",{"useBuiltIns": "usage","corejs": 3}]]
}

图片优化

  • 通过使用 image-webpack-loader 来压缩图片,减少图片资源的体积。
npm install image-webpack-loader --save-dev
module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif|svg)$/,use: [{loader: 'file-loader',},{loader: 'image-webpack-loader',options: {mozjpeg: {progressive: true,quality: 75,},optipng: {enabled: true,},pngquant: {quality: [0.65, 0.9],speed: 4,},},},],},],},
};

移除 Moment.js 的本地化数据

  • Moment.js 自带大量的本地化数据,往往不需要全部加载。可以通过 IgnorePlugin 移除未使用的本地化文件:
const webpack = require('webpack');module.exports = {plugins: [new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/,}),],
};

压缩和分离 CSS

  • 使用 MiniCssExtractPlugin 将 CSS 从 JavaScript 中分离出来,并与 optimize-css-assets-webpack-plugin 一起使用压缩 CSS。
npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin --save-dev
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports = {module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash].css',}),],optimization: {minimizer: [new OptimizeCSSAssetsPlugin()],},
};

使用 Gzip 或 Brotli 压缩

  • 通过 Webpack 的插件为打包后的资源文件进行压缩,可以极大减少文件体积。可以使用 compression-webpack-plugin 进行 Gzip 压缩,或使用 brotli-webpack-plugin 进行 Brotli 压缩。
npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require('compression-webpack-plugin');module.exports = {plugins: [new CompressionPlugin({algorithm: 'gzip',}),],
};
npm install brotli-webpack-plugin --save-dev
const BrotliPlugin = require('brotli-webpack-plugin');module.exports = {plugins: [new BrotliPlugin({asset: '[path].br[query]',threshold: 10240, // 文件大于10KB才压缩minRatio: 0.8,}),],
};

总结

  • 减少 Webpack 打包体积的关键策略包括:启用生产模式、Tree Shaking、按需加载、移除多余的库和 polyfill、使用精简版第三方库、压缩图片和代码、并且适时分离和压缩 CSS 和 JavaScript 文件。通过这些方法,可以显著减少输出文件的体积,提高应用的加载性能。

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

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

相关文章

两种方式创建Vue项目

文章目录 引言利用Vue命令创建Vue项目准备工作安装Vue CLI创建Vue项目方法一:使用vue init命令方法二:使用vue create命令启动Vue项目 利用Vite工具创建Vue项目概述利用Vite创建项目启动项目 结语 引言 大家好,今天我将向大家展示如何使用不…

鸿蒙富文本显示

1.使用 RichText 组件(ArkTS) 背景知识:在 ArkTS(一种鸿蒙应用开发语言)中,RichText组件提供了更强大的富文本显示功能。它允许设置不同的文本样式,包括字体、颜色、字号等多种属性。 Rich Te…

uniapp 如何引用icon 字体

平时使用阿里巴巴的iconfont字体需要下载字体到本地或通过网址引入字体才能使用,但有些情况可能不允许这么做,例如小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以下介绍iconfont字体转base64并引入使用…

【layui】多文件上传组件实现

插件预览效果&#xff1a; 需要引入layui的脚本文件layui.js和样式文件layui.css html代码&#xff1a; <div class"layui-input-block"><div class"layui-upload-list"><table class"layui-table"><colgroup><col…

easyexcel多sheet导出(唯一能用)

1&#xff0c;response流header, contentType等设置跟单sheet一样 2&#xff0c;上代码 Data public class SheetModel<T> { private String sheetName; private Class<T> clazz; private List<T> data; } ExcelWriter writer EasyExcel.write(resp.ge…

vue3中如何更改当前类的文件名称

首先&#xff0c;使用script指定文件名称 <template><div class"person"><h2>姓名&#xff1a;{{ name }}</h2><h2>年龄&#xff1a;{{ age }}</h2><button click"showTel">查看联系方式</button><bu…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

【STM32-HAL库】实现微秒、毫秒、纳秒延时。(STM32F4系列)(附带工程下载链接)

使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 一、新建工程 可以参考我的新建工程系列教程 stm32-HAL库cubeMX新建工程教程&#xff08;以F103C8T6为例&#xff09;ht…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

摘要&#xff1a;本文撰写自阿里云研发工程师李俊睿&#xff08;昕程&#xff09;&#xff0c;主要介绍 Flink 1.20 版本中引入了批作业在 JM failover 后的进度恢复功能。主要分为以下四个内容&#xff1a; 背景解决思路使用效果如何启用 一、背景 在 Flink 1.20 版本之前&am…

问:JVM的垃圾收集算法你知道哪些,有什么区别?

GC&#xff08;垃圾回收器&#xff09;的概念 GC&#xff0c;即垃圾回收&#xff08;Garbage Collection&#xff09;&#xff0c;是计算机程序中一种自动管理内存的机制。其目的是自动回收不再被使用的对象所占用的内存空间&#xff0c;从而避免内存泄漏和内存溢出&#xff0…

帮助,有奖提问

<?php $u $_GET[“user”]; //变量获取 $v $_GET[“variable”]; //$v看flag&#xff0c;绕过正则 $flag‘flag{}; if(isset($u)&&(file_get_contents($u,‘r’)“im admin”)){//猜测data://协议 //检查u指向 echo “hello admin!<br>”; if(preg_…

extern “C“ 的作用、C++ 和 C 编译的不同、C++ 编译过程的五个主要阶段

在 C 中&#xff0c;如果需要从 C 语言导入函数或与 C 代码交互&#xff0c;需要使用 extern "C" 关键字。这是因为 C 和 C 在编译过程中的 符号命名机制&#xff08;即 "名称修饰" 或 "name mangling"&#xff09;不同。 1. extern "C&qu…

2014年国赛高教杯数学建模D题储药柜的设计解题全过程文档及程序

2014年国赛高教杯数学建模 D题 储药柜的设计 储药柜的结构类似于书橱&#xff0c;通常由若干个横向隔板和竖向隔板将储药柜分割成若干个储药槽(如图1所示)。为保证药品分拣的准确率&#xff0c;防止发药错误&#xff0c;一个储药槽内只能摆放同一种药品。药品在储药槽中的排列…

[实时计算flink]双流JOIN语句

Flink SQL支持对动态表进行复杂而灵活的连接操作&#xff0c;本文为您介绍如何使用双流JOIN语句。 背景信息 实时计算的JOIN和传统批处理JOIN的语义一致&#xff0c;都用于将两张表关联起来。区别为实时计算关联的是两张动态表&#xff0c;关联的结果也会动态更新&#xff0c…

【Bug】docker容器之间网络通讯失败

目录 报错起因报错内容解决方案 报错起因 我启动了Milvus数据库 # docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS …

Android Studio 打包aar丢失远程依赖问题解决

之前打包&#xff0c;使用的com.kezong.fat-aar&#xff0c;embed&#xff08;‘XXXX’&#xff09;的方式&#xff0c;可以使三方依赖打包在aar包里&#xff0c;在项目里直接使用 升级了Gradle&#xff1a;7.5后&#xff0c;打包就打包不起来了&#xff0c;一直报错&#xff…

docker-compos安装部署elasticsearch和kibana

elasticsearch和kibana安装部署 version: "3.4" services:elasticsearch:image: docker.das-security.cn/middleware/elasticsearch:7.17.18container_name: elasticsearchenvironment:- discovery.typesingle-node- xpack.security.enabledtrue- xpack.security.au…

【机器学习】金融预测 —— 风险管理与股市预测

我的主页&#xff1a;2的n次方_ 在金融领域&#xff0c;机器学习&#xff08;ML&#xff09;已经成为了不可或缺的工具。金融预测&#xff0c;尤其是风险管理和股市预测&#xff0c;涉及海量数据和复杂模式的分析&#xff0c;而这些正是机器学习擅长处理的领域。通过分析历…

Sentinel最全笔记,详细使用步骤教程清单

一、Sentinel的基本功能 1、流量控制 流量控制在网络传输中是一个常用的概念&#xff0c;它用于调整网络包的发送数据。然而&#xff0c;从系统稳定性角度考虑&#xff0c;在处理请求的速度上&#xff0c;也有非常多的讲究。任意时间到来的请求往往是随机不可控的&#xff0c;…