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. 前端面试之HTML5的新变化

    前端面试之HTML5的新变化 H5新增语义化标签 头部标签 <header> :头部标签 <nav> :导航标签 <article> :内容标签 <secti ...

  2. Win2008 server R2重置登录密码Administrator

    1.PE方式修改密码 背景:https://www.cnblogs.com/Crazy-Liu/p/11245730.html 上述连接中的有AD域的机器系统使用哑巴式老毛桃等启动PE出现以下: 原因 ...

  3. timeout of 20000ms exceeded

    前端:axios请求超时 axios 中有两种超时错误,一种是 HTTP 的超时,另一种是你自定的超时时间. 请求多次,设置拦截器 ---在main.js设置全局的请求次数,请求的间隙 推荐解决方法: ...

  4. linux/git常用命令收集中

    1.进入文件夹 cd 文件名     进入某个文件 cd ..  返回上一级目录 cd /    进入根目录 cd ~ 切换到当前 cd -   切换到上一个目录 2.查看 pwd 文件名   查看路 ...

  5. 配置HDFS的HA

    配置前准备: -- 配置hadoop -- 配置ZooKeeper,传送门:https://www.cnblogs.com/zhqin/p/11906106.html 安装配置好hadoop和ZooK ...

  6. Spring框架入门浅析

    一.Spring Bean的配置 在需要被Spring框架创建对象的实体类的类声明前面加注解:```@component```.这样在Spring扫描的时候,看到该注解就会在容器中创建该实体类的对象. ...

  7. 洛谷P1858

    \({\mathcal{For}}\) \({\mathcal{we}\ }\)\({\mathcal{live}\ }\)\({\mathcal{by}\ }\)\({\mathcal{faith} ...

  8. Vue技术点整理-vue.config.js

    1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...

  9. 内存屏障在CPU、JVM、JDK中的实现

    前言 内存屏障(英语:Memory barrier),也称内存栅栏,内存栅障,屏障指令等,是一类同步屏障指令,它使得 CPU 或编译器在对内存进行操作的时候, 严格按照一定的顺序来执行, 也就是说在内 ...

  10. Java 高并发 解决方案

    1.HTML静态化 2.图片服务器分离 3.数据库集群和库表散列 4.缓存 5.镜像 6.负载均衡 1)硬件四层交换 2)软件四层交换 一:高并发高负载类网站关注点之数据库 二:高并发高负载网站的系统 ...