webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案

说明

玩转 webpack 学习笔记



可选方案


  • thread-loader
  • parallel-webpack
  • HappyPack


932d0c4e54164717a3aa2ca6b8927d91.png

使用 HappyPack 解析资源


原理:每次 webapck 解析一个模块,HappyPack 会将它及它的依赖分配给 worker 线程中

代码示例:

exports.plugins = [
  new HappyPack({
    id: 'jsx',
    threads: 4,
    loaders: ['babel-loader']
  }),
  new HappyPack({
    id: 'styles',
    threads: 2,
    loaders: ['style-loader', 'css-loader', 'less-loader']
  })
]


HappyPack 工作流程:

1b1eed13107e4915bc626906deed8439.png



使用 thread-loader 解析资源


原理:每次 webpack 解析一个模块,threadloader 会将它及它的依赖分配给 worker 线程中

module.exports = smp.wrap({
  entry: entry,
  output: {
    path: path.join(_ dirname, 'dist'),
    filename: '[name ]_[chunkhash:8].js'
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: ' thread- loader',
            options: {
              workers: 3
            }
          },
          ' babel- loader',
          // 'eslint- loader'
        ]
      },
    ]
  }
}


实战使用 happypack

https://github.com/amireh/happypack

242501cfe00c461abb142f260c8e94ce.png


安装

npm install --save-dev happypack


e94fd35f18c04c8d8be700f7d003bcbd.png


在使用之前我们先增加一些页面,提升效果更明显


d84efe60cb9149b5beb993ebd562a0ea.png


然后在运行打包命令 npm run build

e877f415fb0943dbae953c830687d72f.png


接下来使用 happypack

const HappyPack = require('happypack');
exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};
exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: ['babel-loader']
  })
];

0fb69edebeba4e6584415e0cbff04364.png

d61f592ca307441fbf785690044b4e9a.png


然后在运行打包命令 npm run build,我们可以看到有 3 个线程

75401b438aa346589683d097405a66f5.png


可以看到时间有了明显的下降

bf08d6b6b59943d2a515a3d5b5cefbc5.png



实战使用 thread-loader


注释掉 happypack 的代码,安装依赖:https://github.com/webpack-contrib/thread-loader

npm install --save-dev thread-loader


109c0d3100874f3ebc222f9c0d0ef249.png

55f18b642eb6422d8d901b5118036714.png

use: [
    {
        loader: 'thread-loader',
        options: {
            workers: 3
        }
    },
    'babel-loader',
    // 'happypack/loader',
    // 'eslint-loader'
]


637e8ea2ab3a4a86a2de77b7a439ebd9.png


然后在运行打包命令 npm run build,我们发现时间也有了明显的下降,


3294cbf411b541e08b6fa9d28e43965c.png




目录
相关文章
|
4月前
|
Python
解锁Python并发新世界:线程与进程的并行艺术,让你的应用性能翻倍!
【7月更文挑战第9天】并发编程**是同时执行多个任务的技术,提升程序效率。Python的**threading**模块支持多线程,适合IO密集型任务,但受GIL限制。**multiprocessing**模块允许多进程并行,绕过GIL,适用于CPU密集型任务。例如,计算平方和,多线程版本使用`threading`分割工作并同步结果;多进程版本利用`multiprocessing.Pool`分块计算再合并。正确选择能优化应用性能。
35 1
|
5月前
|
安全 Java UED
深度解析Java中方法内的异步调用实践与应对方案
深度解析Java中方法内的异步调用实践与应对方案
128 1
|
16天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
42 1
|
2月前
|
前端开发
umi webpack配置图片资源转base64
umi webpack配置图片资源转base64
|
3月前
|
算法 Java
JUC(1)线程和进程、并发和并行、线程的状态、lock锁、生产者和消费者问题
该博客文章综合介绍了Java并发编程的基础知识,包括线程与进程的区别、并发与并行的概念、线程的生命周期状态、`sleep`与`wait`方法的差异、`Lock`接口及其实现类与`synchronized`关键字的对比,以及生产者和消费者问题的解决方案和使用`Condition`对象替代`synchronized`关键字的方法。
JUC(1)线程和进程、并发和并行、线程的状态、lock锁、生产者和消费者问题
|
4月前
|
运维 关系型数据库 MySQL
掌握taskset:优化你的Linux进程,提升系统性能
在多核处理器成为现代计算标准的今天,运维人员和性能调优人员面临着如何有效利用这些处理能力的挑战。优化进程运行的位置不仅可以提高性能,还能更好地管理和分配系统资源。 其中,taskset命令是一个强大的工具,它允许管理员将进程绑定到特定的CPU核心,减少上下文切换的开销,从而提升整体效率。
掌握taskset:优化你的Linux进程,提升系统性能
|
2月前
|
存储 监控 安全
探究Linux操作系统的进程管理机制及其优化策略
本文旨在深入探讨Linux操作系统中的进程管理机制,包括进程调度、内存管理以及I/O管理等核心内容。通过对这些关键组件的分析,我们将揭示它们如何共同工作以提供稳定、高效的计算环境,并讨论可能的优化策略。
42 0
|
3月前
|
负载均衡 网络协议 安全
解析网络流量管理方案:简化基于云的DNS负载均衡
解析网络流量管理方案:简化基于云的DNS负载均衡
88 1
|
3月前
|
开发者 图形学 UED
深度解析Unity游戏开发中的性能瓶颈与优化方案:从资源管理到代码执行,全方位提升你的游戏流畅度,让玩家体验飞跃性的顺滑——不止是技巧,更是艺术的追求
【8月更文挑战第31天】《Unity性能优化实战:让你的游戏流畅如飞》详细介绍了Unity游戏性能优化的关键技巧,涵盖资源管理、代码优化、场景管理和内存管理等方面。通过具体示例,如纹理打包、异步加载、协程使用及LOD技术,帮助开发者打造高效流畅的游戏体验。文中提供了实用代码片段,助力减少内存消耗、提升渲染效率,确保游戏运行丝滑顺畅。性能优化是一个持续过程,需不断测试调整以达最佳效果。
84 0
|
3月前
|
算法 数据挖掘 BI
【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 详细建模方案解析及参考文献
本文详细介绍了2023年华数杯全国大学生数学建模竞赛B题的最优配色方案设计的建模方案,包括问题分析、建模方案解析及参考文献,旨在通过数学模型和优化算法实现不透明制品的计算机配色,提高配色效率和准确性。
83 0
【2023 华数杯全国大学生数学建模竞赛】 B题 不透明制品最优配色方案设计 详细建模方案解析及参考文献

推荐镜像

更多