Webpack5 常用优化总结

本文主要总结经常用到的一些代码性能优化、减小代码体积、提升webpack打包构建速度等内容的方法。具体的实现可参考webpack官网查看相关示例。
注：如果读者还未接触过webpack，请先了解webpack的基本使用。

正文：

SourceMap ---- 提升开发体验

SourceMap源代码映射，是一个用来生成源代码与构建后代码一一映射的文件的方案。
使用webpack打包之后会生成一个与打包文件对应的.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后的代码报错时，其会通过.map文件将构建后代码中出错的位置映射到源代码出错的位置，从而让浏览器的报错提示的是源代码文件报错的位置信息，帮助开发人员快速定位。
解决方案： 可以通过设置devtool来控制如何生成source map。开发模式下我们一般使用cheap-module-source-map，优点：打包编译速度快，只包含行映射，缺点：没有列映射。生产模式下使用source-map，优点：包含行和列的映射，缺点：打包编译速度慢。

// webpack.dev.js
module.exports = {mode: 'development',devtool: 'cheap-module-source-map'
}
// webpack.prod.js
module.exports = {mode: 'production',devtool: 'source-map'
}

提升构建打包速度

1. HotModuleReplacement（HMR）模块热替换

在webpack5中，热更新是webpack默认开启的。开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而实现局部更新，而不是刷新整个页面。

// webpack.config.js
module.exports = {devServer: {hot: true}
}
2. OneOf 规则数组 只使用第一个匹配规则

当在webpack配置文件中写了很多处理不同资源文件的loader时，资源文件会遍历所有loader进行解析处理，当使用了oneOf规则之后，资源文件一旦被某个loader处理了，就不会继续往下遍历，从而使打包速度更快。

// webpack.config.js
module.exports = {module: {rules: [{oneOf: [{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{test: /\.s[sc]ss$/,use: ['style-loader', 'css-loader', 'sass-loader']},{test: /\.styl$/,use: ['style-loader', 'css-loader', 'stylus-loader']},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: 'asset',parser: {dataUrlCondition: {// 小于10KB的图片转base64maxSize: 10 * 1024}},generator: {filename: 'static/img/[hash:10][ext][query]'}},{test: /\.(ttf|woff2?|mp3|mp4|avi)$/,type: 'asset/resource',generator: {filename: 'static/media/[hash:10][ext][query]'}},{test: /.\.js$/,exclude: /node_modules/,loader: 'babel-loader'}]}]}
}
3. Include/Exclude

引入或排除某些文件，处理的文件更少，速度更快。例如开发时我们用到了第三方的库或者插件，那么这些文件是不需要编译就可以使用的，所以可以排除（exclude）对这些文件的处理。或者只处理（include）某个文件夹下面的源代码。二者选其一使用。

// webpack.config.js
const path = require('path')
const ESlintPlugin= require('eslint-webpack-plugin')module.exports = {module: {rules: [{test: /.\.js$/,// 排除node_modules下的文件 不作处理exclude: /node_modules/,loader: 'babel-loader'},// 或者{test: /.\.js$/,// 只处理src下的内容 其他文件不处理include: path.resolve(__dirname, './src'),loader: 'babel-loader'},]},plugins: [new ESlintPlugin([context: path.resolve(__dirname, './src'),exclude: /node_modules/, // 默认值//或者include: path.resolve(__dirname, './src'),])]
}
4. Cache 缓存

可以对eslint和babel处理的结果进行缓存，让后续打包速度更快。

// webpack.config.js
const path = require('path')
const ESlintPlugin= require('eslint-webpack-plugin')module.exports = {module: {rules: [{test: /.\.js$/,// 排除node_modules下的文件 不作处理exclude: /node_modules/,loader: 'babel-loader',options: {cacheDirectory: true, //  开启babel缓存cacheCompression: false // 关闭缓存文件压缩	}},]},plugins: [new ESlintPlugin([context: path.resolve(__dirname, './src'),exclude: /node_modules/, // 默认值cache: true, // 开启缓存cacheLocation: path.resolve(__dirname, './node_modules/.cache/eslintcache') // 定义缓存位置])]
}
5. Thead 多进程打包

当项目非常庞大的时候，打包速度越来越慢，主要是对js文件进行检查（eslint）、编译（babel）、压缩（terser），要提升运行速度可以开启多进程同时处理js文件。由于进程启动通信都是有开销的，所以只有在代码比较多的时候处理才有效果。

npm i thread-loader --save-dev

使用时，需将此 loader 放置在其他 loader 之前。放置在此 loader 之后的 loader 会在一个独立的 worker 池中运行。
在 worker 池中运行的 loader 是受到限制的。例如：

  • 这些 loader 不能生成新的文件。
  • 这些 loader 不能使用自定义的 loader API（也就是说，不能通过插件来自定义）。
  • 这些 loader 无法获取 webpack 的配置。
    每个 worker 都是一个独立的 node.js 进程，其开销大约为 600ms 左右。同时会限制跨进程的数据交换。

请仅在耗时的操作中使用此 loader！

// webpack.config.js
const os = require('os')
const ESlintPlugin= require('eslint-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin') // 内置插件const threads = os.cups().length  // 获取CPU核数module.exports = {module: {rules: [{test: /\.js$/,include: path.resolve('src'),use: [{loader: "thread-loader",options: {works: threads	}},{loader: "babel-loader"	}],},],},plugins: [new ESlintPlugin([context: path.resolve(__dirname, './src'),exclude: /node_modules/, // 默认值cache: true, // 开启缓存cacheLocation: path.resolve(__dirname, './node_modules/.cache/eslintcache'), // 定义缓存位置threads, // 开启多进程和设置数量]),new TerserPlugin({ // 代码压缩parallel: threads //开启多进程和设置数量})],// 压缩插件 第二种写法optimization: {minimizer: [new CssMinimizerPlugin(), // css文件压缩new TerserPlugin({ // js代码压缩parallel: threads //开启多进程和设置数量})]}
};

减小代码体积

1. Tree Shaking

当我们编写了很多工具函数或者引入了第三方库，可能在实际开发中只应用了其中一部分，那么在打包时这些未用到的代码就无须进行打包。Tree Shaking就帮我们做了这件事情。它可以移除JS上下文中的死代码，且其语法依赖于ESM，不支持CommonJS。
在Webpack中已经默认开启了此配置，所以开发者无需再进行配置。

2. @babel/plugin-transform-runtime

此插件可以对babel进行处理，让辅助代码单独生成到一个文件中，引入到编译后的文件中，而不是每个文件都生成辅助代码，从而减小打包后的体积。

npm i @babel/plugin-transform-runtime -D

// webpack.config.jsmodule.exports = {module: {rules: [{test: /.\.js$/,// 排除node_modules下的文件 不作处理exclude: /node_modules/,loader: 'babel-loader',options: {cacheDirectory: true, //  开启babel缓存cacheCompression: false, // 关闭缓存文件压缩plugins: ['@babel/plugin-transform-runtime'] // 减小代码体积}},]}
}
3. Image Minimizer 图片压缩

当项目中使用了很多本地图片，那么可以对图片进行压缩，减小图片体积，从而加快请求速度。如果项目中使用的是在线链接的图片，那么就不需要进行配置了。

npm i image-minimizer-webpack-plugin imagemin -D

安装完上面两个依赖包之后还需要下载另外两种压缩方式的包，读者选择性下载。
一是无损压缩：

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

二是有损压缩：

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const { extendDefaultPlugins } = require('svgo');module.exports = {module: {rules: [{test: /\.(jpe?g|png|gif|svg)$/i,type: 'asset',},],},plugins: [new ImageMinimizerPlugin({minimizerOptions: {plugins: [['gifsicle', { interlaced: true }],['jpegtran', { progressive: true }],['optipng', { optimizationLevel: 5 }],['svgo',{plugins: extendDefaultPlugins([{name: 'removeViewBox',active: false,},{name: 'addAttributesToSVGElement',params: {attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }],},},]),},],],},}),]
}

优化代码性能

1. Code Split 代码分割

在进行打包时，会将所有的js文件打包到一个文件中，导致体积太大，加载速度慢。当使用了代码分割之后，生成多个js文件，渲染哪个页面就加载哪个js文件，这样就会减少资源的加载，速度就更快，从而提升性能。

使用：
一、多入口、多输出

module.exports = {entry: { // 多个入口文件，打包时就会产生多个输出文件main: './main.js',app: './src/app.js'},optimization: {splitChunks: { // 代码分割配置chunks: 'all',  // 对所有模块都进行分割minSize: 20000, // 生成chunk的最小体积（以bytes为单位）minRemainingSize: 0, // 类似minSize，最后确保提取的文件大小不能为0minChunks: 1, // 至少被引用的次数，满足条件才会代码分割maxAsyncRequests: 30, // 按需加载时并行加载文件的最大数量maxInitialRequests: 30, // 入口js文件最大并行请求数量enforceSizeThreshold: 50000, // 超过50KB一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）cacheGroups: {  // 组，指哪些模块要打包到一个组defaultVendors: { // 组名test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块priority: -10, // 权重，数值越大权重越高reuseExistingChunk: true, // 如果当前chunk包含已从主bundle中拆分出的模块，则它将被重用，而不是生成新的模块},default: { // 默认属性，没有就会使用上面的配置，此配置会覆盖上面的配置minChunks: 2,priority: -20,reuseExistingChunk: true,},},}}
}

二、单入口，多输出

module.exports = {entry: './main.js',optimization: {splitChunks: {chunks: 'all'}}
}
2. Preload / Prefetch 预加载 预获取

preload：使浏览器立即加载资源；prefetch：等待浏览器空闲时开始加载资源。它们只会加载资源，并不执行且都有缓存。Preload加载优先级要高于Prefetch。

npm install --save-dev @vue/preload-webpack-plugin

const PreloadWebpackPlugin = require('@vue/preload-webpack-plugin');module.exports = {plugins: [new PreloadWebpackPlugin({rel: 'preload', // 预加载的relas: 'script', // 预加载的资源类型include: 'allChunks' // 预加载的文件范围	// 或者使用 prefetchrel: 'prefetch'})]
}
3. Network Cache

对输出资源的文件更好的命名，可以做好缓存，提升性能。只对修改的文件打包之后改动文件名，其它文件不因引入改动的文件而改动文件名，可以更好的做到缓存。

module.exports = {optimization: {runtimeChunk: {name: entrypoint => `runtime~${entrypoint.name}.js`}}	
}
4. Core-js 解决兼容性

例如一些ES6的新语法，babel无法处理，例如async函数、promise对象、数组的一些方法等等。所以可以使用core-js专门处理ES6及以上的语法。更好的适配老款浏览器的兼容性。

npm i core-js

安装好之后在主入口引入即可

import 'core-js'
5. PWA 渐进式网络应用程序(progressive web application - PWA)

当网络断开时，就无法访问Web应用了。为了提供离线访问效果，我们可以引入PWA，内部是通过Service Works技术实现的。可以将所有资源缓存到ServiceWork中，当离线时依旧可以访问。

npm install workbox-webpack-plugin --save-dev

const WorkboxPlugin = require('workbox-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js',},plugins: [new HtmlWebpackPlugin({title: 'Output Management',title: 'Progressive Web Application',}),new WorkboxPlugin.GenerateSW({// 这些选项帮助快速启用 ServiceWorkers// 不允许遗留任何“旧的” ServiceWorkersclientsClaim: true,skipWaiting: true,}),],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),clean: true,},};

最后，需要在主入口文件中注册Service Worker才能生效：

main.js

 if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});}

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

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

相关文章

3元一平方公里的在线卫星影像

3元一平方公里的在线卫星影像

我们为大家分享了免费下载卫星影像的方法。 但让人遗憾的是，该影像的最高分辨率只有10米，需要更高清且比较新的卫星影像，看来还是得付费购买才比较靠谱。 自助选择区县范围 商业卫星影像主要面向企事业单位，一般来讲都比较贵&a…
阅读更多...
0-自然语言处理基础知识

0-自然语言处理基础知识

目录 1 transformers1.1 什么是transformers1.2 优缺点和使用场景是什么？优点缺点使用场景 1 transformers 1.1 什么是transformers transformers 是由 Hugging Face 团队开发的一个非常流行的开源库，它为自然语言处理（NLP）提供…
阅读更多...
55、交叉熵损失函数和softmax

55、交叉熵损失函数和softmax

上一节介绍了softmax函数，这里插一篇关于损失函数的介绍，看一看softmax和损失函数是如何结合的。 在很多分类任务中，损失函数使用的是交叉熵损失。 作为一种损失函数，它的重要作用便是可以将“预测值”和“真实值(标签)”进行对比，从而输出 loss 值，直到 loss 值收敛，…
阅读更多...
Windows安装DolphinDB，配置单节点启动与GUI

Windows安装DolphinDB，配置单节点启动与GUI

1. 安装Java 首先，进入网址：jdk11 下载jdk-11.0.20_windows-x64_bin.exe，然后安装即可 安装完成后，打开命令提示符，输入： java javac如果这两个命令都出现一大堆东西，而不是找不到指令的提示的…
阅读更多...
智创有术软件开发公司：开发完整流程--------整体介绍

智创有术软件开发公司：开发完整流程--------整体介绍

智创有术，深耕互联网领域八年，软件开发、平台运营、营销推广、整套解决方案，以“让产品更有价值”为自身使命，打造以原创开发为核心的技术生态体系。 作为一名软件开发工程师,我们需要了解在软件开发过程中的开发流程&#xff0c…
阅读更多...
物联网云平台源码，Spring Cloud智慧工地源码，建筑施工智能化管理

物联网云平台源码，Spring Cloud智慧工地源码，建筑施工智能化管理

智慧工地以物联网云平台为核心，基于智慧工地物联网云平台与现场多个子系统的互联，实现现场各类工况数据采集，存储、分析与应用。通过接入智慧工地物联网云平台的多个子系统板块，根据现场管理实际需求灵活组合，实现一体…
阅读更多...
玩转Python：用Python处理文档，5个必备的库，特别实用，附代码

玩转Python：用Python处理文档，5个必备的库，特别实用，附代码

在Python中，有几个流行的库用于处理文档，包括解析、生成和操作文档内容。以下是一些常用的库及其简介和简单的代码示例： PyPDF2 - 用于处理PDF文件。 简介：PyPDF2是一个纯Python库，用于分割、合并、转换和提取PDF文件中…
阅读更多...
Pod的生命周期

Pod的生命周期

Pod生命周期 pod创建过程运行初始化容器（init container）过程运行主容器（main container）过程 容器启动后钩子（post start）、容器终止前钩子（pre stop） 容器的存活性探测（Liveness probe）、就绪性探测（readiness probe）pod终止过程在整个生命周期中，Pod会出现5种…
阅读更多...
深入理解JVM虚拟机--3.3垃圾收集算法

深入理解JVM虚拟机--3.3垃圾收集算法

深入理解JVM虚拟机--3.3垃圾收集算法 1 标记-清除算法，算法分为“标记”和“清除”两个阶段：首先标记出所有需要回收的对象，在标记完成后统一回收所有被标记的对象，它的标记过程其实在前一节讲述对象标记判定时已经介绍过了。 它…
阅读更多...
Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models

Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models

ABSTRACT 现代大规模视觉-语言模型（LVLMs）采用了相同的视觉词汇-CLIP，可以涵盖大多数常见的视觉任务。然而，对于一些需要密集和细粒度视觉感知的特殊视觉任务，例如文档级OCR或图表理解，尤其是在非英语环境…
阅读更多...
react：ffcreator中FFCreatorCenter视频队例

react：ffcreator中FFCreatorCenter视频队例

最近项目要求，一键生成房子的推荐视频，选几张图，加上联系人的方式就是一个简单的视频，因为有web端、小程序端，为了多端口用，决定放在服务器端生成。 目前用的是react中的nextjs来开发项目。 nextjs中怎样用ffcreator上一章有讲到过，这里不再详细说了，考虑多端口用，并…
阅读更多...
卷积神经网络（CNN）、循环神经网络（RNN）和自注意力（self-attention）对比

卷积神经网络（CNN）、循环神经网络（RNN）和自注意力（self-attention）对比

考虑同一个的问题：将由个词元组成的序列映射到另一个长度相同的序列，其中的每个输入词元或输出词元由维向量表示。 我们将比较能够解决上述问题的三种常用方法：卷积神经网络（CNN）、循环神经网络（RNN&#x…
阅读更多...
Verifiable Credentials可验证证书 2023 终极指南

Verifiable Credentials可验证证书 2023 终极指南

1. 引言 Dock公司为去中心化数字身份领域的先驱者，其自2017年以来，已知专注于构建前沿的可验证证书（Verifiable Credentials）技术。本文将阐述何为电子证书、电子证书工作原理、以及其对组合和个人的重要性。 伪造实物证书和数字…
阅读更多...
掌握 gRPC：从安装到构建第一个C++ 和Python微服务

掌握 gRPC：从安装到构建第一个C++ 和Python微服务

文章目录 一、前言1. gRPC的概念和用途2. gRPC的优势3. gRPC的应用场景 二、gRPC的基本原理1. RPC（远程过程调用）简介2. Protocol Buffers的作用3. gRPC与传统HTTP/REST服务的比较 三、安装gRPC1. 系统要求和前置条件2. 安装步骤概述 四、创建第一个gRPC…
阅读更多...
单元测试、系统测试、集成测试知识总结

单元测试、系统测试、集成测试知识总结

一、单元测试的概念 单元测试是对软件基本组成单元进行的测试，如函数或一个类的方法。当然这里的基本单元不仅仅指的是一个函数或者方法，有可能对应多个程序文件中的一组函数。 单元也具有一些基本的属性。比如：明确的功能、规格定义&#…
阅读更多...
【python爬虫】设计自己的爬虫 4. 封装模拟浏览器 PyppeteerSimulate

【python爬虫】设计自己的爬虫 4. 封装模拟浏览器 PyppeteerSimulate

Pyppeteer是Puppeteer的Python版实现 Pyppeteer的背后实际上有一个类似于Chrome的浏览器–Chromium class PyppeteerSimulate(BrowserSimulateBase):def __init__(self):self.browser Noneself.page None# 启动浏览器# is_headless 是否开启无头模式# is_cdp 是否使用cdp (C…
阅读更多...
win10报错“api-ms-win-crt-string-l1-1-0.dll文件丢失，软件无法启动”，快速修复方法，亲测有效

win10报错“api-ms-win-crt-string-l1-1-0.dll文件丢失，软件无法启动”，快速修复方法，亲测有效

api-ms-win-crt-string-l1-1-0.dll是Windows操作系统中的一个动态链接库文件，属于Microsoft C Runtime Library。它包含了Windows操作系统需要运行C程序的一些基本系统函数，比如字符串处理、内存分配等。 它的作用主要是提供一些基本的、用于支持C语言编…
阅读更多...
go语言gin框架的基本使用

go语言gin框架的基本使用

1.首先在linux环境上安装go环境，这个网上搜搜就行 2.初始化一个go mod，网上搜搜怎么初始化 3.下面go代码的网址和端口绑定自己本机的就行 4.与另一篇CSDN一起食用，效果更好哟---> libcurl的get、post的使用-CSDN博客 package mainimpo…
阅读更多...
算法每日一题： 被列覆盖的最多行数 | 二进制 - 状态压缩

算法每日一题： 被列覆盖的最多行数 | 二进制 - 状态压缩

大家好，我是星恒 今天的题目又是一道有关二进制的题目，有我们之前做的那道 参加考试的最大学生数的 感觉，哈哈，当然，比那道题简单多了，这道题感觉主要的考点就是二进制，大家可以好好总结一下这道…
阅读更多...
04、Kafka ------ CMAK 各个功能的作用解释（Cluster、集群、Broker、位移主题、复制因子、领导者副本、主题）

04、Kafka ------ CMAK 各个功能的作用解释（Cluster、集群、Broker、位移主题、复制因子、领导者副本、主题）

目录 启动命令：CMAK的用法★ 在CMAK中添加 Cluster★ 在CMAK中查看指定集群★ 在CMAK中查看 Broker★ 位移主题★ 复制因子★ 领导者副本和追随者副本★ 查看主题 启动命令： 1、启动 zookeeper 服务器端 小黑窗输入命令： zkServer 2、启动 …
阅读更多...
最新文章

Copyright @ 2022~2023