webpack 打包性能优化

开启多线程打包 thread-loader

https://www.npmjs.com/package/thread-loader

https://github.com/webpack-contrib/thread-loader

module.exports = {
module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
use: [
'thread-loader',
// your expensive loader (e.g babel-loader)
],
},
],
},
};
use: [
{
loader: 'thread-loader',
// loaders with equal options will share worker pools
options: {
// the number of spawned workers, defaults to (number of cpus - 1) or
// fallback to 1 when require('os').cpus() is undefined
workers: 2, // number of jobs a worker processes in parallel
// defaults to 20
workerParallelJobs: 50, // additional node.js arguments
workerNodeArgs: ['--max-old-space-size=1024'], // Allow to respawn a dead worker pool
// respawning slows down the entire compilation
// and should be set to false for development
poolRespawn: false, // timeout for killing the worker processes when idle
// defaults to 500 (ms)
// can be set to Infinity for watching builds to keep workers alive
poolTimeout: 2000, // number of jobs the poll distributes to the workers
// defaults to 200
// decrease of less efficient but more fair distribution
poolParallelJobs: 50, // name of the pool
// can be used to create different pools with elsewise identical options
name: 'my-pool',
},
},
// your expensive loader (e.g babel-loader)
];

prewarming 预热


const threadLoader = require('thread-loader'); threadLoader.warmup(
{
// pool options, like passed to loader options
// must match loader options to boot the correct pool
},
[
// modules to load
// can be any module, i. e.
'babel-loader',
'babel-preset-es2015',
'sass-loader',
]
);

为防止启动工作程序时出现高延迟,可以预热工作程序池。

这将引导池中的最大工作程序数量,并将指定的模块加载到node.js模块高速缓存中。

refs

shit 翻译

https://webpack.docschina.org/loaders/thread-loader/

Lerna

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=Lerna



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


webpack 打包性能优化的更多相关文章

  1. webpack打包性能优化

    1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebp ...

  2. 最全 webpak4.0 打包性能优化清单

    最全 webpak4.0 打包性能优化清单 webpack4.0如何进行打包优化? 无非是从两个角度进行优化,其一:优化打包速度,其二:优化打包体积,送你一份打包性能优化清单 1.使用loader的时 ...

  3. webpack打包性能分析

    1. 如何定位webpack打包速度慢的原因 首先需要定位webpack打包速度慢的原因,才能因地制宜采取合适的方案,我们可以在终端输入: webpack --profile --json > ...

  4. webpack打包体积优化

    优化: 1:外部引入模块(cdn)     如 jquery,zepto,d3, bootstrap这些固定的lib 使用cdn直接引用就可以,没有必要打包到build,有效利用302. 2:图标优化 ...

  5. 深入浅出的webpack构建工具---tree shaking打包性能优化(十二)

    阅读目录 1. 什么是tree-shaking? 2. 在webpack中如何使用 tree-shaking 呢? 3. 使用webpack-deep-scope-plugin 优化 回到顶部 1. ...

  6. Webpack打包效率优化篇

    Webpack基础配置: 语法解析:babel-loader 样式解析:style-loader css解析:css-loader less解析:less-loader 文件解析:url-loader ...

  7. vue 应用生产环境的 webpack 打包配置优化

    转:https://blog.csdn.net/robin_star_/article/details/83856363 前言:很好的打包优化的帖子,还没来的急去实测验证 1. 去掉 console ...

  8. webpack 打包性能分析工具

    webpack-bundle-analyzer,推荐使用 新版 vue-cli (旧版按照新版的进行配置即可)已经集成该插件,在项目的 package.json 文件中注入如下命令,然后运行(npm ...

  9. 彻底解决Webpack打包慢的问题

    转载 这几天写腾讯实习生 Mini 项目的时候用上了 React 全家桶,当然同时引入了 Webpack 作为打包工具.但是开发过程中遇到一个很棘手的问题就是,React 加上 React-Route ...

随机推荐

  1. SQL Server 日志收缩方法

    在日常运维中,有时会遇到"The transaction log for database 'xxxx' is full due to 'ACTIVE_TRANSACTION'." ...

  2. windows 系统 MySQL_5.6.21安装教程

      1.双击安装文件 mysql_installer_community_V5.6.21.1_setup.1418020972.msi,等待安装界面出现,见下图: 2.勾选:I accept thel ...

  3. day132:2RenMJ:MJ需求文档&MJ游戏流程&Egret白鹭引擎安装&TypeScript简要介绍

    目录 1.麻将产品需求文档 2.麻将游戏流程 3.Egret白鹭引擎 4.TypeScript简要了解 5.TypeScript快速入门 1.麻将产品需求文档 1.麻将术语 1.名词术语 牌⼦: 序数 ...

  4. RabbitMQ入门看这一篇就够了

    一文搞懂 RabbitMQ 的重要概念以及安装 一 RabbitMQ 介绍 这部分参考了 <RabbitMQ实战指南>这本书的第 1 章和第 2 章. 1.1 RabbitMQ 简介 Ra ...

  5. P6739 [BalticOI 2014 Day1] Three Friends 题解

    目录 写在前面 Solution 何为字符串哈希(可跳过): Code 写在前面 P6739 [BalticOI 2014 Day1] Three Friends 听说这题可以用比较暴力的做法过,比如 ...

  6. Language Guide (proto3) | proto3 语言指南(开篇)

    前言 近日在学习gRPC框架的相关知识时接触到Protobuf(protocol-buffers,协议缓冲区),proto3等知识.网上很多文章/帖子经常把gRPC与proto3放在一起,为避免初学者 ...

  7. 统一资源定位符 (URL)

    统一资源标识符(uniform/universal resource identifier,URI)用于表示Internet中的资源(通常是文档).URI 主要用于两种目的,其一是命名资源,尽管此时把 ...

  8. Javascript关键字,条件语句,函数及函数相关知识

    关键字 条件语句 作用域 回调 关键字 根据规定,关键字是保留的,不能用作变量名或函数名. 下面是一些ECMAScript关键字的完整列表. break ,case,catch,continue,de ...

  9. c++复习笔记(3)

    这篇是各种琐碎的东西. 类的函数如果在类内部直接实现,则成为内联函数候选.类外部实现的方法,可以用inline声明,使其称为内联函数候选.但是函数是否可以成为内联函数,需要看编译器的行为.. 构造函数 ...

  10. C++类组合问题

    #include <iostream> using namespace std; class Vehicle { public: Vehicle(float speed=0,int tot ...