happypack提升项目构建速度

时间: 2018-09-17阅读: 1741标签: node

前言

最近在看《深入浅出webpack》看到了happypack。就想起公司一vue项目,每次项目启动都将近2分钟。等的实在让人不耐烦,都够我支付宝偷一波能量了。就自己实践了下,事实证明是有效的。原平均构建速度为1分55秒(5次),使用happypack后平均构建速度为1分45秒(5次)。我只修改了对.vue文件的处理,如下实战代码,节省了10秒还是不错滴。


happypack

由于有大量文件需要解析和处理,构建是文件读写和计算密集型的操作,特别是当文件数量变多后,Webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 Webpack 是单线程模型的,也就是说 Webpack 需要处理的任务需要一件件挨着做,不能多个事情一起做。happypack把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。


实战(代码来自构建将近2分钟的项目)

修改前代码


// ...

module: {
    // ...
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
  ]
},
plugins: []


修改后代码

// ...
module: {
// ...
  rules: [
    {
      test: /\.vue$/,
      loader: 'happypack/loader?id=vue',
    },
  ]
},
plugins: [
  new HappyPack({
    id: 'vue',
    loaders: [{
      loader: 'vue-loader',
      options: vueLoaderConfig
    }],
  }),
]

在 Loader 配置中,所有.vue文件的处理都交给了 happypack/loader 去处理,使用紧跟其后的 querystring ?id=vue(这个id随便去只要跟下面实例中的id对应上就行了) 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件(可以new 多个HappyPack分别去处理多种类型文件,比如你可以再new一个HappyPack去处理css,同上面处理.vue文件一样)。
在 Plugin 配置中,新增了个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理.vue。选项中的 id 属性的值和上面 querystring 中的 ?id=vue相对应,选项中的 loaders 属性和 Loader 配置中一样。


接入 HappyPack 后,你需要给项目安装新的依赖:

npm i -D happypack

在实例化 HappyPack 插件的时候,除了可以传入 id 和 loaders 两个参数外,HappyPack 还支持如下参数:

  • threads 代表开启几个子进程去处理这一类型的文件,默认是3个,类型必须是整数。
  • verbose 是否允许 HappyPack 输出日志,默认是 true。
  • threadPool 代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多。


来源:https://segmentfault.com/a/1190000016418966


理解 Node.js 中 Stream(流)

Stream(流) 是 Node.js 中处理流式数据的抽象接口。 stream 模块用于构建实现了流接口的对象。Node.js 提供了多种流对象。 例如,对 HTTP 服务器的request请求和 process.stdout(标准输出), 都是流的实例

Node.js特点和适用场景

Node是由Ryan Dahl创造出来的,Ryan Dahl是一名资深的C/C++程序员,在创造出Node之前,他的主要工作都是围绕高性能web服务器来展开的,他找到了设计高性能web服务器的几个要点

Node.js是什么?及node的优缺点

Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动,非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。

Node中流的概念

流数据:就是字节数据,在应用程序中各种对象之间交换与传输数据的时候,总是先将该对象中所包含的数据转化为字节数据也就是流数据。再通过流的传输,到达目的对象后,再将流数据转化为该对象中可以使用的数据。

Node.js 12 发布!来看看有哪些新动向吧

今天我们非常激动地发布了 Node.js 12。值得注意的更新以及新功能包括更快速的启动、更好的默认堆内存限制、更新 V8 引擎、TLS、llhttp,新功能包括诊断报告、捆绑的 heap dump 功能

query和params在前后端中的区别

最近在学node,试着做一个前后端都有的项目,然后就遇到了query和parmas这俩兄弟,你说他们俩长得也不像吧,可这用法实在是太类似了,专门写篇文章来区分这哥俩,分别会从vue路由和Node接收两个角度讲

Node 最古老的 npm 包 request 将被废弃

相信 Node.js 开发者对 Request 都不会陌生,这是一个 Node.js 模块,以 npm 包的形式提供,是一个简单的 HTTP 客户端,通过它可方便地实现 HTTP 请求。可以看到,request 的最新版本是 2.88.0

我怎样用Node.js自动完成工作的

我们在工作中经常会进行很多繁琐的任务:更新配置文件,复制和粘贴文件,更新 Jira 标签等。慢慢的花在这些任务上的时间会越来越多。reskin 的定义是使用相同的游戏机制,屏幕和元素的定位

如何正确使用Node.js事件

事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法。但是在 react 中用的却是事件驱动而不是调用。

快速理解 nodejs 模块

module.exports 用于暴露一个值,这个值默认是对象,也可以覆盖为原始值。尝试在一个文件中直接 log 出 module 的值,可以得到:你需要通过修改 module 的 exports 属性来输出你需要输出的东西,而 require 用于导入一个模块

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全