happypack提升项目构建速度

时间: 2018-09-17阅读: 4698标签: 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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1084

Node.js FS模块方法速查

所有文件操作提供同步和异步的两种方式,本笔记只记录异步的API,异步方式其最后一个参数是回调函数。回调函数的第一个参数往往是错误对象,如果没有发生参数,那么第一个参数可能是null或者undefinded。

前端学nodejs有什么用处?

Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境,一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。

node简单的上传图片

首先:要做到服务器获取到你上传的文件,配置好koabody。(其实还有很多关于上传的中间件,因为本来就使用了koabody的中间件就直接用这个就好了)

如何用nodejs实现前后端传值?

nodejs前后端传值即前后端的数据交互,nodejs中的数据提交有两种方式GET方法和POST方法,下面我们来看一下如何使用这两种方法实现nodejs前后端的传值。nodejs实现前后端传值的方法如下:

Ubuntu 上 Node.js 安装和卸载

Ubuntu 安装 Node.Js:执行检查可更新的软件,先用普通的apt工具安装低版本的node,然后再升级最新。更换淘宝的镜像,这个是必须的,用过的node的人都知道。安装更新版本的工具N

node怎么升级?

Node.js的开发非常活跃,他的最新稳定版本也频繁变化,所以需要经常的升级Node。用n模板升级nodejs,n模块是专门用来管理nodejs的版本;用NVM来升级nodejs,注:nvm在使用的时候有坑,建议使用n来升级nodejs和控制版本。

nodejs适合做什么?

面对一个新技术,多问几个为什么总是好的。既然 PHP、Python、Java 都可以用来进行后端开发,那么为什么还要去学习 Node.js?Node.js适合做什么?Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,一个让 JavaScript 运行在服务端的开发平台。

在node中使用jwt签发与验证token

token的意思是“令牌”,是服务端生成的一串字符串,作为客户端进行请求的一个标识。token是在服务端产生的。如果前端使用用户名和密码向服务端发送请求认证,服务端认证成功,那么在服务端会返回token给前端。

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

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

NodeJs实现简单的爬虫

爬虫,是一种按照一定的规则,自动地抓取网页信息的程序或者脚本;利用NodeJS实现一个简单的爬虫案例,脚本所用到的nodejs模块。express 用来搭建一个服务,将结果渲染到页面, swig模板引擎,cheerio用来抓取页面的数据

点击更多...

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