webpack实际实践优化项目

参考：
如何通过性能优化，将包的体积压缩了62.7%
雅虎35条
20210526-webpack深入学习，搭建和优化react项目

本文只专注于性能优化的这个部分。

总体来说分为两个方面：第一是开发环境中主要优化打包速度，第二是线上环境中主要优化分包大小。

打包阶段

使用speed-measure-webpack-plugin插件，显示打包过程中的每个步骤耗时大小。然后根据耗费的时长去优化。
比如下图：

安装cache-loader打包缓存
  {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: [cacheLoader,{loader: 'url-loader',options: {limit: 10000,name: utils.assetsPath('img/[name].[hash:7].[ext]')}}]}
happypack .在打包的时候开启多线程打包
UglifyJsPlugin开启多线程优化时间，有两个方式，可以都试一下看看哪个效果好一点。
  1. 开启多线程
  // 在minimizer属性内添加// 自定义js优化配置，将会覆盖默认配置new UglifyJsPlugin({parallel: true,  //使用多进程并行运行来提高构建速度sourceMap: false,uglifyOptions: {warnings: false,compress: {unused: true,drop_debugger: true,drop_console: true, },output: {comments: false // 去掉注释}}})
  1. 使用：webpack-parallel-uglify-plugin
    上图可以看出UglifyJsPlugin这个包花费时间太长，可以使用相同效果的另一个包，开启多核同步压缩增加压缩的效率。
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({uglifyJS: {output: {beautify: false, // 是否保留空格和制表符，设置为不保留comments: false, // 是否保留代码中的注释，设置为不保留},compress: {drop_console: true, // 是否删除代码中的console语句，设置为删除collapse_vars: false, // 是否内嵌虽然已经定义了，但是只用到一次的变量，设置为不使用reduce_vars: false, // 是否提取出现了多次但是没有定义成变量去引用的静态值，设置为不转换},warnings: false // 是否在删除没有用到的代码时输出警告信息，设置为不警告},}),
线上优化阶段

这一部分主要在于分离包（组件懒加载、路径懒加载、按需引入）、合并包（optimization.splitChunks）、压缩包（NGINX: gzip）
具体可以看以前的文章20210526-webpack深入学习，搭建和优化react项目

使用webpack-bundle-analyzer插件，显示打包后的包大小、包组成，然后针对去处理。
将大包拆小：

异步引入，路由懒加载 分包 import('@/components/Index')
按需引入组件，看看是不是直接把一个依赖都引入进来了，比如lodash需要引入babel-plugin-lodash等。

优化代码和合并相同的包

看看analyzer显示的第三方包有没有重复引入、打包到不同包的情况，这样的话就比较浪费空间，最好将第三方包合并一下，这里就使用到 optimization.splitChunks。

压缩代码、去除无用代码

引入Uglifyjs进行代码压缩（第一步时间优化已经做了） Uglifyjs还会进行Tree-shaking剔除无用代码。比如引入了第三方包却没有用上的情况也会删除。

在服务器上的优化

  1. 图片和其他文件进行无损压缩，并上传到cdn上。
    推荐网站：https://tinyjpg.com

  2. nginx配置开通gzip ，从线上拉取的代码能压缩2/3
    巨强。

Next项目的实际实践

一年半年前进行过一次next项目的webpack优化，那时候的优化方向主要是splitChunks分包的数据。
半年前的参考文章可看博客列表：结合Next项目实际认识webpack.splitChunks

Next版本：12.3.4（因为使用next-plugin-antd-less 只能支持到next12。。）
Node版本：16.20.2

推荐阅读：v12.3.X的Next文档

经过半年多的持续优化，在webpack这方面又有了新的优化目标：

  1. 发现treeShaking没有生效，引入但是没有使用的资源仍然打包进去了。
  2. console.log正式环境禁用。
  3. 同一个组件在不同的包里被反复打包，导致一个页面上被多次下载。
  4. 部署构建太慢，想要加快速度。

Treeshaking

结论：next使用terser-plugin做的压缩和摇树，本地构建不会开，但是在构建环境会使用，因此确实会把没有引用的组件shake出去，不会影响使用。

调研过程：

  1. 一开始从本地上看以为失效了，查看了很多terser有关的问题，列在如下：
    • https://github.com/vercel/next.js/issues/20804
    • https://github.com/vercel/next.js/issues/49742
  2. 推荐使用next13+可以解决这个问题，于是重新实验，但是本地情况下仍然没有shake出去。
  3. nvm安装（next13+必须要node18以上）教程：
    • https://blog.csdn.net/Cavin80/article/details/132831839
    • https://juejin.cn/post/7083026831263137800
  4. 按照方案二，增加terser的参数passes:2可以解决，但是next并没有开放terserOptions给我们，因此只能另辟蹊径，找了半天源码，找到了一个v12版本可行的options插入方法。注意这个为后续的drop_console方案提供了思路。（不过事实证明passes也没什么变化）
  // next v12版本的实验特性，用于配置swc压缩属性experimental: { swcMinifyDebugOptions: { compress: { passes: 2 } } },

  1. modularizeImports。经过不懈寻找，找到了这么一个属性，可以用于内部组件的按需引入。

    官方推荐按需引入来达到treeShaking效果：https://github.com/vercel/next.js/issues/45687

    https://vercel.com/blog/how-we-optimized-package-imports-in-next-js

  2. 最后发现：原来是没有部署到线上，正式构建环境是可以treeshaking成功的。


drop console

线上环境我们并不想显示意外的console，因此删除console也是一个需求。

next提供的没有起作用。

  compiler: {removeConsole: {exclude: ['error'],},},

根据上面对源码的研究，找到了插入terserOptions的方式，增加了如下代码，push到构建环境后就能正常生效了。

  experimental: {swcMinifyDebugOptions: { compress: { passes: 2, drop_console: true } },},

PS.中间有一段自行重新引入了terser-webpack-plugin没有成功。

        config.optimization.minimizer = [new TerserPlugin({parallel: true,sourceMap: true,terserOptions: {compress: { drop_console: isProduction },},}),];

部署构建太慢，想要加快速度。

  1. 引入速度衡量依赖speed-measure-webpack-plugin

    使用参考：https://github.com/vercel/next.js/discussions/33678

    config.plugins.push(smp);

  2. 分析：注意vscode setting原本默认的展示日志行数太少，可以通过 “terminal.integrated.scrollback”:1000000配置。

经过测试速度插件，可以看出耗时较久的是next\ no-loaders\ less-loader，前两个应该是next内部自行实现的（很无奈），那我们只能从less-loader下手了。

接下来是省流版：本项目使用next-plugin-antd-less已经不再维护，并且不支持多线程处理，因此费劲了九牛二虎之力仍然没有效果。作为一次探究过程放在下面。

打印出next的loader配置，经过对next-plugin-antd-less源码的研究，实际上对于css的处理next都是放在oneOf中的，我们要处理也要优先处理oneOf中的loader。

我考虑的方案是：

  1. 采用thread-loader添加多线程处理。
  2. 或者采用happyPack添加多线程处理。

const withConsole = (config) => {// console.log('----resolveLoader----\n',config.resolveLoader)// console.log('----rules----\n',config.module.rules)// console.log('---oneOf----\n',console.log(config.module.rules.map((rule) => Array.isArray(rule.oneOf) && rule)))return {...config,webpack(webpackConfig, nextConfig) {// const _oneOf = [];// webpackConfig.module.rules.forEach((rule) => {//   if (Array.isArray(rule)) {//     rule.forEach((loader) => {//       Array.isArray(loader.oneOf) && _oneOf.push(loader);//     });//   } else {//     Array.isArray(rule.oneOf) && _oneOf.push(rule);//   }// });// // console.log('---oneOf----\n');// _oneOf.forEach(rule=>{//   rule.oneOf.forEach(_d=>{//     if(_d.test?.toString() === /\.module\.(scss|sass)$/.toString()){//       console.log(//         '---sass----\n',//         '🌈',//         _d//       )//     }//     console.log(_d)//   })// })const config = nextConfig;console.log('---config----\n', config);return webpackConfig;},};
};

{test: /(antd\/.*?\/style|@ant-design).*(?<![.]js)$/,use: 'null-loader'},{ issuerLayer: 'edge-asset', type: 'asset/source' },{dependency: 'url',loader: 'next-middleware-asset-loader',type: 'javascript/auto',layer: 'edge-asset'},{test: /\.wasm$/,loader: 'next-middleware-wasm-loader',type: 'javascript/auto',resourceQuery: /module/i},{ test: /\.m?js/, resolve: { fullySpecified: false } },{test: /\.(js|cjs|mjs)$/,issuerLayer: 'api',parser: { url: true }},{oneOf: [[Object], [Object],[Object], [Object],[Object], [Object],[Object], [Object],[Object], [Object],[Object], [Object]]},{test: /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i,loader: 'next-image-loader',issuer: { not: /\.(css|scss|sass)$/ },dependency: { not: [Array] },options: { isServer: true, isDev: false, basePath: '', assetPrefix: '' }},{ oneOf: [ [Object], [Object] ] },{test: /\.+(js|jsx|mjs|ts|tsx)$/,use: [ 'thread-loader', [Object] ],include: [Function (anonymous)],type: 'javascript/auto'},{test: /\.(jpg|jpeg|png|svg|gif|ico|webp|jp2|avif)$/,issuer: /\.\w+(?<!(s?c|sa)ss)$/i,exclude: undefined,use: [ [Object] ]}
]
但是问题点在于，我打印出了所有的loader配置以后发现 找不到less-loader。。

然后我没有办法，把next-plugin-antd-less源码的插件引入了项目测试一下效果，在手动引入的代码文件中增加了thread-loader.

报错：UnhandledPromiseRejectionWarning: TypeError: loaderContext.getLogger is not a function
查找了一下这个问题是因为less-loader的版本问题导致的，降低了一下less-loader的版本。。。
https://github.com/webpack-contrib/thread-loader/issues/135

最后效果看起来确实少了5-6秒，但是不太值得。最终放弃了这个方案，以及happyPack也是同样的原因，做不到再把plugin引进源码文件再处理一次。

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

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

相关文章

什么是特征值和特征向量？(done)

什么是特征值和特征向量？(done)

什么是齐次方程&#xff1f; https://blog.csdn.net/shimly123456/article/details/136198159 行列式和是否有解的关系&#xff1f; https://blog.csdn.net/shimly123456/article/details/136198215 特征值和特征向量 参考视频&#xff1a;https://www.bilibili.com/video/BV1…
阅读更多...
怎么把Maven依赖的包都提取到文件夹

怎么把Maven依赖的包都提取到文件夹

由于我用Maven只想借助他下载jar包和依赖&#xff0c;不想自己的程序编译还得依赖Maven&#xff0c;所以试验时候用Maven引用依赖&#xff0c;试验成功再拷贝jar包来本地引用&#xff0c;有时候依赖多&#xff0c;一个个拷贝就太慢了。所以要能批量把所有依赖jar提取出来。 加…
阅读更多...
【C语言】长篇详解，字符系列篇2-----strcat,strcmp,strncpy，strncat，strncmp函数的使用和模拟实现【图文详解】

【C语言】长篇详解，字符系列篇2-----strcat,strcmp,strncpy，strncat，strncmp函数的使用和模拟实现【图文详解】

欢迎来CILMY23的博客喔&#xff0c;本期系列为【C语言】长篇详解&#xff0c;字符系列篇2-----“混杂”的字符串函数&#xff0c;字符串函数的使用和模拟实现【图文详解】&#xff0c;图文讲解各种字符串函数&#xff0c;带大家更深刻理解C语言中各种字符串函数的应用&#xff…
阅读更多...
LeetCode.589. N 叉树的前序遍历

LeetCode.589. N 叉树的前序遍历

题目 589. N 叉树的前序遍历 分析 我们之前有做过LeetCode的 144. 二叉树的前序遍历&#xff0c;其实对于 N 插树来说和二叉树的思路是一模一样的。 二叉树的前序遍历是【根 左 右】 N叉树的前序遍历顺序是【根 孩子】&#xff0c;你可以把二叉树的【根 左 右】想象成【根 孩…
阅读更多...
【python】网络爬虫与信息提取--scrapy爬虫框架介绍

【python】网络爬虫与信息提取--scrapy爬虫框架介绍

一、scrapy爬虫框架介绍 scrapy是一个功能强大的网络爬虫框架&#xff0c;是python非常优秀的第三方库&#xff0c;也是基于python实现网络爬虫的重要技术路线。scrapy不是哟个函数功能库&#xff0c;而是一个爬虫框架。 爬虫框架&#xff1a;是实现爬虫功能的一个软件结构和功…
阅读更多...
AS-V1000 视频监控平台产品介绍：客户端功能介绍（四）

AS-V1000 视频监控平台产品介绍：客户端功能介绍（四）

目 录 一、引言 1.1 AS-V1000视频监控平台介绍 1.2平台服务器配置说明 二、软件概述 2.1 客户端软件用途 2.2 客户端功能 三、客户端功能说明 3.1告警管理 3.1.1告警联动 &#xff08;1&#xff09;告警联动显示 &#xff08;2&#xff09;告警联动处理 3…
阅读更多...
基于学习的参数化查询优化方法

基于学习的参数化查询优化方法

一、背景介绍 参数化查询是指具有相同模板&#xff0c;且只有谓词绑定参数值不同的一类查询&#xff0c;它们被广泛应用在现代数据库应用程序中。它们存在反复执行动作&#xff0c;这为其性能优化提供了契机。 然而&#xff0c;当前许多商业数据库处理参数化查询的方法仅仅只…
阅读更多...
Uibot (RPA设计软件）智能识别信息＋微信群发助手（升级版）———课后练习2

Uibot (RPA设计软件）智能识别信息＋微信群发助手（升级版）———课后练习2

解决痛点&#xff1a; Excel如何计算两个日期之间相差月数 方法&#xff1a; 1、首先打开要进行操作的Excel表格。 2、打开后选中要计算相差月数的单元格。 3、然后输入公式&#xff1a;DATEDIF(A2,B2,"m")&#xff0c;输入完成后点击回车键。 4、在弹出的窗口中&a…
阅读更多...
Rancher实用篇-使用rancher，部署微服务应用

Rancher实用篇-使用rancher，部署微服务应用

说到rancher&#xff0c;我们必须先了解一下k8s 一、k8s简介 Kubernetes&#xff08;通常简写为 K8s&#xff09;是一个开源的容器管理系统&#xff0c;由Google于2014年发起&#xff0c;并在2015年贡献给Cloud Native Computing Foundation (CNCF)进行维护。它基于Borg项目的…
阅读更多...
202427读书笔记|《猫的自信：治愈系生活哲学绘本》——吸猫指南书，感受猫咪的柔软慵懒与治愈

202427读书笔记|《猫的自信：治愈系生活哲学绘本》——吸猫指南书，感受猫咪的柔软慵懒与治愈

202427读书笔记|《猫的自信&#xff1a;治愈系生活哲学绘本》——吸猫指南书&#xff0c;感受猫咪的柔软慵懒与治愈 《猫的自信&#xff1a;治愈系生活哲学绘本》作者林行瑞&#xff0c;治愈系小漫画绘本&#xff0c;10分钟可以读完的一本书&#xff0c;线条明媚&#xff0c;自…
阅读更多...
量化巨头“卖空”被刷屏！网友：又一类量化策略要“收摊”了

量化巨头“卖空”被刷屏！网友：又一类量化策略要“收摊”了

量化圈遇到了龙年首宗“大事件”&#xff01; 2月20日晚间&#xff0c;沪深交易所同时出手对量化巨头灵均投资的异常交易行为进行“处理”。 沪深交易所均称发现灵均在2月19日开盘1分钟内&#xff0c;名下多个账户通过计算机程序自动生产交易指令&#xff0c;短时间大量下单卖…
阅读更多...
公寓报修|公寓报修管理系统|基于springboot公寓报修管理系统设计与实现(源码+数据库+文档)

公寓报修|公寓报修管理系统|基于springboot公寓报修管理系统设计与实现(源码+数据库+文档)

公寓报修管理系统目录 目录 基于springboot公寓报修管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、住户管理 2、房间管理 3、维修人员管理 4、维修分类管理 5、物品信息管理 6、维修申请管理管理 四、数据库设计 1、实体ER图 五、核心代码 六、…
阅读更多...
IO 作业 24/2/20

IO 作业 24/2/20

一、思维导图 二、习题 #include <myhead.h> int main(int argc, const char *argv[]) {FILE *fpNULL;FILE *fqNULL;pid_t pidfork();if(pid>0){if((fpfopen("./text.txt","r"))NULL){perror("fopen error");return -1;} if((f…
阅读更多...
鸿蒙将与安卓应用形成“硬分叉”，多家平台急聘鸿蒙开发员

鸿蒙将与安卓应用形成“硬分叉”，多家平台急聘鸿蒙开发员

最近&#xff0c;网友注意到&#xff0c;多家企业公布了鸿蒙系统有关的岗位招聘。 11 月 8 日&#xff0c;美团发布了鸿蒙高级工程师、鸿蒙基建工程师等多个鸿蒙开发相关岗位。主要开发美团鸿蒙App、大众点评鸿蒙App。 根据脉脉平台&#xff0c;美团鸿蒙基建工程师岗位给出的…
阅读更多...
C++ 二分模版 数的范围

C++ 二分模版 数的范围

给定一个按照升序排列的长度为 n 的整数数组&#xff0c;以及 q 个查询。 对于每个查询&#xff0c;返回一个元素 k 的起始位置和终止位置&#xff08;位置从 0 开始计数&#xff09;。 如果数组中不存在该元素&#xff0c;则返回 -1 -1。 输入格式 第一行包含整数 n 和 q &…
阅读更多...
JavaScript中手动实现Array.prototype.map方法

JavaScript中手动实现Array.prototype.map方法

在前端开发中&#xff0c;我们经常需要对数组进行操作和处理。在JavaScript中&#xff0c;数组是常用的数据类型之一。而数组的map方法可以将一个数组中的每个元素都进行某种操作&#xff0c;并返回一个新的数组。今天&#xff0c;我们就来手动实现JavaScript中数组原型的map方…
阅读更多...
Spring Bean 的生命周期了解么?

Spring Bean 的生命周期了解么?

Spring Bean 的生命周期基本流程 一个Spring的Bean从出生到销毁的全过程就是他的整个生命周期, 整个生命周期可以大致分为3个大的阶段 : 创建 使用 销毁 还可以分为5个小步骤 : 实例化(Bean的创建) , 初始化赋值, 注册Destruction回调 , Bean的正常使用 以及 Bean的销毁 …
阅读更多...
​ 安达发|APS排程软件的动态合并优化详解

​ 安达发|APS排程软件的动态合并优化详解

在制造业中&#xff0c;为了提高生产效率、降低成本并满足客户需求&#xff0c;企业需要采用先进的人工智能算法APS系统。APS&#xff08;高级计划与排程&#xff09;系统作为一种强大的工具&#xff0c;可以帮助企业实现这一目标。本文将详细介绍APS排程软件的动态合并优化功能…
阅读更多...
从零开始手写mmo游戏从框架到爆炸（十五）— 命令行客户端改造

从零开始手写mmo游戏从框架到爆炸（十五）— 命令行客户端改造

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 到现在&#xff0c;我们切实需要一个客户端来完整的进行英雄选择&#xff0c;选择地图&#xff0c;打怪等等功能。所以我们需要把之前极为简陋的客户端改造一下。 首先…
阅读更多...
继续教育山东第一医科大学临床医学试题及答案，分享几个实用搜题和学习工具 #媒体#学习方法#微信

继续教育山东第一医科大学临床医学试题及答案，分享几个实用搜题和学习工具 #媒体#学习方法#微信

在追求知识的道路上&#xff0c;合理使用学习工具是我们必不可少的一环。 1.难试题 这是一个网站 是一家专注于学生、家长、教师等作业搜题查找答案的网站。里面有大量的2023作业题、作业答案、作业资料及2023作业详细讲解。每天都会更新很多作业题 2.灵兔搜题 这是个微信公…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023