Webpack4.x优化

作者：花生vs布丁丁7_835 | 来源：互联网 | 2023-07-03 23:37

抽离公共代码公共代码只需要下载一次就缓存起来了，避免了重复下载。项目中打包出来的bundle.js体积过大，我们可以将一些依赖打包成动态链接库

抽离公共代码

公共代码只需要下载一次就缓存起来了&＃xff0c;避免了重复下载。
项目中打包出来的 bundle.js 体积过大&＃xff0c;我们可以将一些依赖打包成动态链接库&＃xff0c;然后将剩下的第三方依赖拆出来。这样可以有效减小 bundle.js 的体积大小。当然&＃xff0c;你还可以继续提取业务代码的公共模块。

//webpack.config.js module.exports &＃61; {optimization: {splitChunks: {//分割代码块cacheGroups: {vendor: {//第三方依赖priority: 1, //设置优先级&＃xff0c;首先抽离第三方模块name: &＃39;vendor&＃39;,test: /node_modules/,chunks: &＃39;initial&＃39;,minSize: 0,minChunks: 1 //最少引入了1次},//缓存组common: {//公共模块chunks: &＃39;initial&＃39;,name: &＃39;common&＃39;,minSize: 100, //大小超过100个字节minChunks: 3 //最少引入了3次}}}} }

exclude/include

通过 exclude、include 配置来确保转译尽可能少的文件。exclude 指定要排除的文件&＃xff0c;include 指定要包含的文件。
配置了 include 的比未配置 include 构建更快

//webpack.config.js const path &＃61; require(&＃39;path&＃39;); module.exports &＃61; {//...module: {rules: [{test: /\.js[x]?$/,use: [&＃39;babel-loader&＃39;],include: [path.resolve(__dirname, &＃39;src&＃39;)]}]}, }

noParse

如果你使用到了不需要解析的第三方依赖&＃xff0c;那么配置 noParse 很显然是一定会起到优化作用的。类似jquery&＃xff0c;loash

//webpack.config.js module.exports &＃61; {//...module: {noParse: /jquery|lodash/} }

IgnorePlugin

webpack 的内置插件&＃xff0c;作用是忽略第三方包指定目录。

//webpack.config.js module.exports &＃61; {//...plugins: [//忽略 moment 下的 ./locale 目录new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)] }

在使用的时候&＃xff0c;如果我们需要指定语言&＃xff0c;那么需要我们手动的去引入语言包&＃xff0c;例如&＃xff0c;引入中文语言包:

import moment from &＃39;moment&＃39;; import &＃39;moment/locale/zh-cn&＃39;;// 手动引入

index.js 中只引入 moment&＃xff0c;打包出来的 bundle.js 大小为 263KB&＃xff0c;如果配置了 IgnorePlugin&＃xff0c;单独引入 moment/locale/zh-cn&＃xff0c;构建出来的包大小为 55KB。

externals

我们可以将一些JS文件存储在 CDN 上(减少 Webpack打包出来的 js 体积)&＃xff0c;在 index.html 中通过

DOCTYPE html> <html lang&＃61;"en"> <head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><title>Documenttitle> head> <body><div id&＃61;"root">rootdiv><script src&＃61;"http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script> body> html>

我们希望在使用时&＃xff0c;仍然可以通过 import 的方式去引用(如 import $ from ‘jquery’)&＃xff0c;并且希望 webpack 不会对其进行打包&＃xff0c;此时就可以配置 externals

//webpack.config.js module.exports &＃61; {//...externals: {//jquery通过script引入之后&＃xff0c;全局中即有了 jQuery 变量&＃39;jquery&＃39;: &＃39;jQuery&＃39;} }

cache-loader

性能开销较大的 loader 之前添加 cache-loader&＃xff0c;将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下。
babel-loader 配置 cache 的话&＃xff0c;也可以不使用 cache-loader&＃xff0c;给 babel-loader 增加选项 cacheDirectory

npm install cache-loader -D

DllPlugin

DllPlugin 将不会频繁更新的库进行编译&＃xff0c;当这些依赖的版本没有变化时&＃xff0c;就不需要重新编译。

happypack

HappyPack 就能让 Webpack 做到这点&＃xff0c;它把任务分解给多个子进程去并发的执行&＃xff0c;子进程处理完后再把结果发送给主进程。

npm install happypack -D

HardSourceWebpackPlugin

配置 hard-source-webpack-plugin&＃xff0c;首次构建时间没有太大变化&＃xff0c;但是第二次开始&＃xff0c;构建时间大约可以节约 80%。

npm install hard-source-webpack-plugin -D

推荐阅读

io
从零基础到精通的前台学习路线

随着互联网的发展，前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线，包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习，可以掌握前台开发的基本技能，并有能力找到一份月薪8000以上的工作。 ... [详细]

蜡笔小新 2023-12-10 20:05:15
io
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
io
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
io
baresip android编译、运行教程1语音通话

本文介绍了如何在安卓平台上编译和运行baresip android，包括下载相关的sdk和ndk，修改ndk路径和输出目录，以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]

蜡笔小新 2023-12-14 10:53:48
io
在重复造轮子的情况下用ProxyServlet反向代理来减少工作量

像不少公司内部不同团队都会自己研发自己工具产品，当各个产品逐渐成熟，到达了一定的发展瓶颈，同时每个产品都有着自己的入口，用户 ... [详细]

蜡笔小新 2023-12-13 15:19:01
io
web.py开发web 第八章 Formalchemy 服务端验证方法

本文介绍了在web.py开发中使用Formalchemy进行服务端表单数据验证的方法。以User表单为例，详细说明了对各字段的验证要求，包括必填、长度限制、唯一性等。同时介绍了如何自定义验证方法来实现验证唯一性和两个密码是否相等的功能。该文提供了相关代码示例。 ... [详细]

蜡笔小新 2023-12-12 16:36:00
io
javaweb多图片打包下载，弹出提示框问题_html/css_WEBITnose

在springmvc框架中，前台ajax调用方法，对图片批量下载，如何弹出提示保存位置选框？Controller方法 ... [详细]

蜡笔小新 2023-12-12 14:56:31
io
Express App如何提供不需要的静态文件？

本文介绍了如何使用Express App提供静态文件，同时提到了一些不需要使用的文件，如package.json和/.ssh/known_hosts，并解释了为什么app.get('*')无法捕获所有请求以及为什么app.use(express.static(__dirname))可能会提供不需要的文件。 ... [详细]

蜡笔小新 2023-12-12 14:38:07
io
前端人员必须知道的三个问题及其发展阶段

本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ... [详细]

蜡笔小新 2023-12-12 12:45:59
go
一句话解决高并发的核心原则

本文介绍了解决高并发的核心原则，即将用户访问请求尽量往前推，避免访问CDN、静态服务器、动态服务器、数据库和存储，从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例，以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]

蜡笔小新 2023-12-12 10:56:24
io
Spring常用注解（绝对经典），全靠这份Java知识点PDF大全

本文介绍了Spring常用注解和注入bean的注解，包括@Bean、@Autowired、@Inject等，同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用，以及@Autowired和@Inject的区别和用法。此外，还提到了@Required属性的配置和使用。 ... [详细]

蜡笔小新 2023-12-12 10:15:07
io
vue cli 3.x移除console采坑记

本文记录了在vue cli 3.x中移除console的一些采坑经验，通过使用uglifyjs-webpack-plugin插件，在vue.config.js中进行相关配置，包括设置minimizer、UglifyJsPlugin和compress等参数，最终成功移除了console。同时，还包括了一些可能出现的报错情况和解决方法。 ... [详细]

蜡笔小新 2023-12-11 21:16:05
io
HTML5网页模板怎么加百度统计？

本文介绍了如何在HTML5网页模板中加入百度统计，并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题，并介绍了如何使用Visual Studio 2010创建HTML5模板。此外，还提到了使用Jquery编写美好的HTML5前端框架模板的方法，以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]

蜡笔小新 2023-12-11 12:06:41
main
代理模式的详细介绍及应用场景

代理模式是一种在软件开发中常用的设计模式，通过在客户端和目标对象之间增加一层中间层，让代理对象代替目标对象进行访问，从而简化系统的复杂性。代理模式可以根据不同的使用目的分为远程代理、虚拟代理、Copy-on-Write代理、保护代理、防火墙代理、智能引用代理和Cache代理等几种。本文将详细介绍代理模式的原理和应用场景。 ... [详细]

蜡笔小新 2023-12-10 19:07:21
io
DSP中cmd文件的命令文件组成及其作用

本文介绍了DSP中cmd文件的命令文件的组成和作用，包括链接器配置文件的存放链接器配置信息、命令文件的组成、MEMORY和SECTIONS两个伪指令的使用、CMD分配ROM和RAM空间的目的以及MEMORY指定芯片的ROM和RAM大小和划分区间的方法。同时强调了根据不同芯片进行修改的必要性，以适应不同芯片的存储用户程序的需求。 ... [详细]

蜡笔小新 2023-12-10 15:31:37

花生vs布丁丁7_835

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章