webpack优化打包速度

webpack打包速度太慢

在这里插入图片描述
优化

  • 1.多线程打包 js压缩和loader
  • 2.优化启动速度 hard-source-webpack-plugin
  • 3.删除无用的 分析类插件
  • 4.DllPlugin通道打包

1.webpack多线程打包 loader

loader 使用 thread-loader 将他放置你要使用的loader前面就行,不过这个lorder例如style-loader不支持的,而且面对比较快的loader也不建议使用,会降低速度

{
        test: /\.vue$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 4,
              workerParallelJobs: 50,
              poolParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          {
            loader: "vue-loader",
            options: vueLoaderConfig
          }
        ]
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: "thread-loader",
            options: {
              workers: 4,
              workerParallelJobs: 50,
              poolParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          "babel-loader?cacheDirectory"
        ],
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },

2.webpack多线程打包 js压缩

使用terser-webpack-plugin或ParallelUglifyPlugin 替换UglifyJsPlugin
UglifyJsPlugin 是单线程工作的 设置parallel: true也可以开启多线程
不过这个我测试了下打包速度感觉并没有提高很多

旧 parallel: true也可以开启多线程
new UglifyJsPlugin({
        uglifyOptions: {
          mangle: {
            safari10: true
          },
          compress: {
            // warnings: process.env.env_config === 'pre' || process.env.env_config === 'prod',
            drop_console: process.env.env_config === 'pre' || process.env.env_config === 'prod',  //注释console
            drop_debugger: process.env.env_config === 'pre' || process.env.env_config === 'prod', //注释debugger
            pure_funcs: process.env.env_config === 'pre' || process.env.env_config === 'prod'?['console.log']:[], //移除console.log
          },
        },

        // 降低编译速度 此处需要注意。若是在使用了UglifyJSPlugin且开启sourceMap后,需要同时给devtool设置值。同样的若是设置了devtool的值,则UglifyJSPlugin也需要开启sourceMap。否则不会生成.map的源代码对应文件。
        sourceMap: config.build.productionSourceMap,
        cache: true,
        parallel: true
      }),
      
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
// / 代码压缩新
      new ParallelUglifyPlugin({
          // 传递给 UglifyJS 的参数
          // (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)
          uglifyJS: {
              output: {
                  beautify: false, // 最紧凑的输出
                  comments: false, // 删除所有的注释
              },
              compress: {
                drop_console: process.env.env_config === 'pre' || process.env.env_config === 'prod',  //注释console
                drop_debugger: process.env.env_config === 'pre' || process.env.env_config === 'prod', //注释debugger
                pure_funcs: process.env.env_config === 'pre' || process.env.env_config === 'prod'?['console.log']:[], //移除console.log
              },
              // 降低编译速度 此处需要注意。若是在使用了UglifyJSPlugin且开启sourceMap后,需要同时给devtool设置值。同样的若是设置了devtool的值,则UglifyJSPlugin也需要开启sourceMap。否则不会生成.map的源代码对应文件。
              sourceMap: config.build.productionSourceMap,
              // cache: true,
          }
      }),

3. hard-source-webpack-plugin 优化启动速度

npm i hard-source-webpack-plugin -D
进行文件的热加载的,一个项目启动或者打包的时间,超过40s的时候,可以进行项目的优化和热加载。
注意:第一次启动会很慢,不改配置都会使用缓存启动,第二次很快,不过第一次加载时间会比不用此插件慢1倍,还有就是build的时候貌似没什么效果,所以慎用!

const HardSourceWebpackPlugin=require('HardSourceWebpackPlugin')
插件中使用
new HardSourceWebpackPlugin(),

4.删除无用的 分析类插件

例如 speed-measure-webpack-plugin 分析打包各个阶段花费的时长,这个很坑,打包会非常慢,不调试的话直接去掉

5.DllPlugin通道打包 动态链接库

将一些固定的插件 例如element vue等单独抽离打一个包 直接在html里引用
具体实现参考我另一篇
https://blog.csdn.net/qq_38935512/article/details/112517327
进入 搜索 动态链接库

优化
一套下来,最主要有效果的感觉还是
删除无用的 分析类插件 和 动态链接库
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《参与电网削峰调节的电动重卡换电站调度策略》

标题"参与电网削峰调节的电动重卡换电站调度策略"表明这是一个关于电动重型卡车和电网协同运营的主题。下面对标题中的关键术语进行解读: 电动重卡: 指的是使用电力驱动而不是传统燃油的重型卡车,通常是指货运卡车。电动卡车的使用…

封装flutter webview页面

例如在flutter里面跳转百度页面 需要安装webview_flutter webview_page.dart import package:flutter/material.dart; import package:webview_flutter/webview_flutter.dart;class MyWebView extends StatefulWidget {const MyWebView({super.key, required this.webViewUrl,…

堆栈_有效括号

题比较特殊,主要在于它的所有要输入,都是左括号开头,没有右括号开头的,比如"] [",这种是不算为括号的,由于必然是对称的,若能符合,因而直接在遇到右括号时,检查…

LeetCode刷题---打家劫舍问题

顾得泉:个人主页 个人专栏:《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂,年薪百万! 一、打家劫舍 题目链接:打家劫舍 题目描述 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定…

Java实现堆

堆是一种基于完全二叉树的数据结构,它分为大根堆和小根堆。在大根堆中,每个节点的值都大于或等于其子节点的值;而在小根堆中,每个节点的值都小于或等于其子节点的值。 在Java中,我们可以使用数组来表示堆。由于完全二…

RS232串口_笔记

这里写目录标题 1、RS232串口理论起始位数据位校验位LSB & MSB示波器查看数据信号对应连接方式 1、RS232串口理论 UART(通用异步收发传输) 是一种通信协议,而 RS232 (串行通信接口)是种物理接口标准。UART 是一种用于在计算机和外部设备之间传输数据的协议&…

鸿蒙系统开发手册 - HarmonyOS内核驱动层源码分析

众所周知系统定义HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能…

链表高频面试题

1. 两个链表第一个公共子节点 LeetCode160 给你两个单链表的头节点 headA 和 headB ,请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点,返回 null 。 图示两个链表在节点 c1 开始相交: listA [4,1,8,4,5], listB [5…

11-22 SSM3

书城分页查询 使用mybatis分页插件: 请完成登陆注册 -> 跳转到首页 解决前端上架时间点击切换 以及侧边栏点击由背景颜色的改变 完成超链接的绑定点击时间 -> jquery $(document).ready(function() { // 初始化上架时间状态为 true(上架&…

记录一次爱快路由ACL策略引起的大坑

环境: A公司和B公司采用爱快的ipsec互联 B公司同时有加密软件限制网络 问题:对方ERP无法连接我们的数据库服务器 先简单测试了下1433端口是不是通的 下面的测试结果,直接ping是通的,但是加上1433端口后就不通 排查过程&#xff1…

centos7下执行yum命令报错

前言 在Linux系统中,安装nginx时候,需要先安装环境。 Nginx是使用C语言开发,安装nginx需要先从官网上将源码下载,然后编译,编译需要gcc环境,但是在安装gcc环境的时候,执行命令报错。 yum install –y gcc-…

【开源】基于JAVA的大学计算机课程管理平台

项目编号: S 028 ,文末获取源码。 \color{red}{项目编号:S028,文末获取源码。} 项目编号:S028,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2…

有什么值得推荐的node. js练手项目吗?

前言 可以参考一下下面的nodejs相关的项目,希望对你的学习有所帮助,废话少说,让我们直接进入正题 1、 NodeBB Star: 13.3k 一个基于Node.js的现代化社区论坛软件,具有快速、可扩展、易于使用和灵活的特点。它支持多种数据库&…

使用JAVA语言写一个排队叫号的小程序

以下是一个简单的排队叫号的小程序&#xff0c;使用JAVA语言实现。 import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;public class NumberingSystem {public static void main(String[] args) {Queue<String> queue new LinkedList<…

WPF绘制进度条(弧形,圆形,异形)

前言 WPF里面圆形进度条实现还比较麻烦,主要涉及到的就是动态绘制进度条的进度需要用到简单的数学算法。其实原理比较简单,我们需要的是话两条重叠的弧线,里面的弧线要比里面的弧线要宽,这样简单的雏形就出来了。 基础写法 我们可以用Path来绘制弧线,代码如下: <Gr…

推荐几款python在线学习和电子书网站

学习python的过程中&#xff0c;虽然下载了很多的电子书&#xff0c;但是在学习过程中基本上都是通过一些在线网站或者在线电子书进行的。 下面给大家推荐几个在线学习教程网站和电子书网站。 《菜鸟教程》 一句话介绍&#xff1a;很多初学者的选择 网址&#xff1a;https:…

C++11——右值引用和移动语义

左值和右值 在C11之前&#xff0c;我们很少去关注左值和右值这一概念&#xff0c;但是在C11中&#xff0c;加入了一个非常重要的语法&#xff1a;右值引用。 左值和右值&#xff0c;一般来说可以当作字面意思&#xff0c;左值是经常出现在表达式左边的值&#xff0c;右值是经…

【开源视频联动物联网平台】写一个物联网项目捐献给Dromara组织

一、平台简介 MzMedia开源视频联动物联网平台&#xff0c;简单易用&#xff0c;更适合中小企业和个人学习使用。适用于智能家居、农业监测、水利监测、工业控制&#xff0c;车联网&#xff0c;监控直播&#xff0c;慢直播等场景。 支持抖音&#xff0c;视频号等主流短视频平台…

Linux--系统结构与操作系统

文章目录 冯诺依曼体系结构为什么要有内存&#xff1f;场景一 操作系统何为管理&#xff1f; 冯诺依曼体系结构 冯诺依曼体系结构是计算机体系结构的基本原理之一。它将程序和数据都以二进制形式存储&#xff0c;以相同的方式处理和存取。 上图是冯诺依曼体系结构的五大组成部…

处理机调度与作业调度

处理机调度 一个批处理型作业&#xff0c;从进入系统并驻留在外存的后备队列上开始&#xff0c;直至作业运行完毕&#xff0c;可能要经历如下的三级调度 高级调度 也称为作业调度、长程调度、接纳调度。调度对象是作业 主要功能&#xff1a; 挑选若干作业进入内存 为作业创建…