06.webpack性能优化--构建速度

  • 优化babel-loader
  • happyPack
  • IgnorePlugin
  • paralleUglifyPlugin
  • noParse
  • 自动刷新

1 happypack多进程打包

  • js单线程,开启多进程打包
  • 提高构建速度(特别是多核CPU)
const HappyPack = require('happypack')module.exports = smart(webpackCommonConf, {mode: 'production',output: {// filename: 'bundle.[contentHash:8].js',  // 打包代码时,加上 hash 戳filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀(如 cdn 域名),这里暂时用不到},module: {rules: [// js{test: /\.js$/,// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例use: ['happypack/loader?id=babel'],include: srcPath,// exclude: /node_modules/},]},plugins:[// happyPack 开启多进程打包new HappyPack({// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件id: 'babel',// 如何处理 .js 文件,用法和 Loader 配置中一样loaders: ['babel-loader?cacheDirectory']}),] })

关于开启多进程

  • 项目较大,打包较慢,开启多进程能提高速度
  • 项目较小,打包较快,开启多进程会降低速度(进程开销)
  • 按需使用

2. IgnorePlugin

  • 这是webpck的内置组件
  • 这个插件的作用是:忽略第三方包指定目录,让这些指定目录不要被打包进去
  • 例子:比如我们要使用moment这个第三方依赖库,该库主要是对时间进行格式化,并且支持多个国家语言
moment包打包的问题
import moment from 'moment'
//设置语言
moment.locale('zh-cn');
let r = moment().endOf('day').fromNow();
console.log(r);

这样打印出来的就是中文的时间,因为我在使用这个API的时候,前面设置了语言类型moment.locale为中文zh-cn。但是,虽然我设置了语言为中文,但是在打包的时候,是会将所有语言都打包进去的。这样就导致包很大,打包速度又慢所以,最好能够少打包一些没用的依赖目录进去而moment的包含’./locale/‘该字段路径的文件目录就是各国语言的目录,比如’./locale/zh-cn’就是中文语言

plugins:[//moment这个库中,如果引用了./locale/目录的内容,就忽略掉,不会打包进去new Webpack.IgnorePlugin(/\.\/locale/,/moment/),
]

问题存在并解决

我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,所以这个时候可以手动引入中文语言的目录

import moment from 'moment'//设置语言//手动引入所需要的语言包
import 'moment/locale/zh-cn';moment.locale('zh-cn');let r = moment().endOf('day').fromNow();

3. ParallelUglifyPlugin

webpack默认提供了UglifyJS插件来压缩JS代码,但是它使用的是单线程压缩代码,也就是说多个js文件需要被压缩,它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树,再去应用各种规则分析和处理AST,导致这个过程耗时非常大)。使用UglifyJS压缩代码如下:

module.exports = {plugins: [new webpack.optimize.UglifyJsPlugin({sourceMap: true,compress: {warnings: false}}),]
}

webpack有多个JS文件需要输出和压缩时候,原来会使用UglifyJS去一个个压缩并且输出,但是ParallelUglifyPlugin插件则会开启多个子进程,把对多个文件压缩的工作分别给多个子进程去完成,但是每个子进程还是通过UglifyJS去压缩代码。无非就是变成了并行处理该压缩了,并行处理多个子任务,效率会更加的提高

4. noParse

这是module中的一个属性,
作用:不去解析属性值代表的库的依赖

  1. 我们一般引用jquery,可以如下引用
import jq from 'jquery'
  1. 对于上面的解析规则:当解析jq的时候,会去解析jq这个库是否有依赖其他的包
  2. 我们对类似jq这类依赖库,一般会认为不会引用其他的包(特殊除外,自行判断)。所以,对于这类不引用其他的包的库,我们在打包的时候就没有必要去解析,这样能够增加打包速率。
  3. 所以,可以在webpack的配置中增加noParse属性(以下代码只需要看module的noParse属性)
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode:'development',entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'dist')},module:{noParse:/jquery/,//不去解析jquery中的依赖库},}

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

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

相关文章

教程:使用 Keras 优化神经网络

一、介绍 在 我 之前的文章中,我讨论了使用 TensorFlow 实现神经网络。继续有关神经网络库的系列文章,我决定重点介绍 Keras——据说是迄今为止最好的深度学习库。 我 从事深度学习已经有一段时间了,据我所知,处理…

C++八皇后问题代码

#include <iostream> #include <cmath> using namespace std;// 判断能否放置皇后 bool canPlace(int q[], int n, int i) {for (int j 0; j < n; j) {// 判断是否在同一行或同一列if (q[j] i || abs(q[j] - i) abs(j - n)) {return false;}}return true; }/…

wpf devexpress在未束缚模式中生成Tree

TreeListControl 可以在未束缚模式中没有数据源时操作&#xff0c;这个教程示范如何在没有数据源时创建tree 在XAML生成tree 创建ProjectObject类实现数据对象显示在TreeListControl: public class ProjectObject {public string Name { get; set; }public string Executor {…

航天联志Aisino-AISINO26081R服务器通过调BIOS用U盘重新做系统(windows系统通用)

产品名称:航天联志Aisino系列服务器 产品型号:AISINO26081R CPU架构&#xff1a;Intel 的CPU&#xff0c;所以支持Windows Server all 和Linux系统&#xff08;重装完系统可以用某60驱动管家更新所有硬件驱动&#xff09; 操作系统&#xff1a;本次我安装的服务器系统为Serv…

RSocket 与 gRPC 基准测试

搭建舞台 RSocket RSocket 在应用网络上实现反应式语义。它是一种端到端强制执行背压和其他反应流概念的网络协议。 远程过程调用 gRPC 旨在解决多语言 RPC 的问题。它有两部分&#xff1a;protobuf IDL 和 HTTP/2 网络协议。 苹果到苹果&#xff1f; 从设计和组件来看&#…

学习c#的第二十一天

目录 C# 泛型&#xff08;Generic&#xff09; 泛型类型参数 类型参数的约束 约束多个参数 未绑定的类型参数 类型参数作为约束 notnull 约束 class 约束 default 约束 非托管约束 委托约束 枚举约束 类型参数实现声明的接口 泛型类 泛型方法 泛型和数组 泛型…

android studio编译SDL so库

一、下载源码 SDL官网 二、解压&#xff0c;拷贝android项目&#xff0c;并重新命名 2.1、解压 2.2&#xff0c;重命名项目名称&#xff08;androidSDL&#xff09;AndroidSDL Github 三、导入头文件和源文件&#xff0c;修改android.mk文件 3.1、在jni目录下创建SDL2文件…

亚马逊云科技云存储服务指南

文章作者&#xff1a;Libai 高效的云存储服务对于现代软件开发中的数据管理至关重要。亚马逊云科技云存储服务提供了强大的工具&#xff0c;可以简化工作流程并增强数据管理能力。 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开发案例、技术专栏…

在前端开发中,什么是CDN(Content Delivery Network)?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

AM@函数展开成幂级数@间接法@常用麦克劳林幂级数展开公式

文章目录 间接法推导幂级数展开常用麦克劳林幂级数展开公式应用例例例 间接法推导幂级数展开 已知函数的幂级数展开公式间接推导其他函数幂级数 使用原始的推导公式推导函数的幂级数展开是繁琐不便的,需要分别计算各项系数 a n f ( n ) ( 0 ) n ! a_{n}\frac{f^{(n)}(0)}{n!}…

【RH850芯片】RH850U2A芯片平台Spinlock的底层实现

目录 前言 正文 1.RH850U2A上的原子操作 1.1 Link 1.2 Link generation 1.3 Success in storing 1.4 Failure in storing 1.5 Condition for successful storing 1.6 Loss of the link 1.7 示例代码 2.Spinlock代码分析 2.1 尝试获取Spinlock 2.2 释放Spinlock …

基于PyTorch搭建你的生成对抗性网络

前言 你听说过GANs吗&#xff1f;还是你才刚刚开始学&#xff1f;GANs是2014年由蒙特利尔大学的学生 Ian Goodfellow 博士首次提出的。GANs最常见的例子是生成图像。有一个网站包含了不存在的人的面孔&#xff0c;便是一个常见的GANs应用示例。也是我们将要在本文中进行分享的…

Spring Boot中使用MongoDB完成数据存储

我们在开发中用到的数据存储工具有许多种&#xff0c;我们常见的数据存储工具包括&#xff1a; 关系性数据库&#xff1a;使用表格来存储数据&#xff0c;支持事务和索引。&#xff08;如&#xff1a;MySQL&#xff0c;Oracle&#xff0c;SQL Server等&#xff09;。NoSQL数据…

Redis篇---第七篇

系列文章目录 文章目录 系列文章目录前言一、是否使用过 Redis Cluster 集群,集群的原理是什么?二、 Redis Cluster 集群方案什么情况下会导致整个集群不可用?三、Redis 集群架构模式有哪几种?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分…

OPPO Watch纯手机开启远程ADB调试

Wear OS手表中&#xff0c;我们可以直接在开发者设置中打开WiFi调试。但是这在OPPO等魔改Android系统中不再奏效。 需要什么&#xff1f;&#xff1f; 手表一台手机一个OTG转接头一个手表充电器一个 演示设备 手机&#xff1a; OPPO Find X手表&#xff1a; OPPO Watch 1代 …

Android——模块级build.gradle配置——applicationId和namespace

官方地址&#xff1a; 配置应用模块-applicationId和namespace了解 build.gradle 中的实用设置。https://developer.android.google.cn/studio/build/configure-app-module?hlzh-cn 产生那些异常场景&#xff1a; Android&#xff1a;Namespace not specified. Please spec…

3D重建相关

目录 <font colorblue>整个3D重建的过程是怎样的<font colorblue>体素、网格、点云之间的关系是什么<font colorblue>网格和体素化之间是什么关系<font colorblue>点云中的颜色怎么处理成最终3D模型上的颜色<font colorblue>点云还原的3D模型的颜…

Halcon (3):窗体常用语法使用

文章目录 文章专栏视频资源前言halcon图像使用加载图片示例绘制常用图像批量批注绘制 文章专栏 Halcon开发 视频资源 机器视觉之C#联合Halcon 前言 在使用halcon的算子之前&#xff0c;我们要先学会如何在图片上面进行标注。因为我们不仅要导出处理的结果&#xff0c;还要导出…

论文阅读:YOLOV: Making Still Image Object Detectors Great at Video Object Detection

发表时间&#xff1a;2023年3月5日 论文地址&#xff1a;https://arxiv.org/abs/2208.09686 项目地址&#xff1a;https://github.com/YuHengsss/YOLOV 视频物体检测&#xff08;VID&#xff09;具有挑战性&#xff0c;因为物体外观的高度变化以及一些帧的不同恶化。有利的信息…

Windows10电脑没有微软商店的解决方法

在Windows10电脑中用户可以打开微软商店&#xff0c;下载自己需要的应用程序。但是&#xff0c;有用户反映自己Windows10电脑上没有微软商店&#xff0c;但是不清楚具体的解决方法&#xff0c;接下来小编给大家详细介绍关于解决Windows10电脑内微软商店不见了的方法&#xff0c…