happypack提升项目构建速度

时间: 2018-09-17阅读: 4850标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Node.js创建服务器和模拟客户端请求

服务器是某种长期运行,等待请求资源的应用程序,Web服务器是使用HTTP协议,等待客户端连接后请求资源的驻守应用程序;HTTP协议是应用层的协议,在传输层依然是使用TCP或者UDP协议

node.js如何删除注册表?

注册表是windows操作系统中的一个核心数据库,其中存放着各种参数,直接控制着windows的启动、硬件驱动程序的装载以及一些windows应用程序的运行,从而在整个系统中起着核心作用。

Node.js 应用:Koa2 使用 JWT 进行鉴权

在前后端分离的开发中,通过 Restful API 进行数据交互时,如果没有对 API 进行保护,那么别人就可以很容易地获取并调用这些 API 进行操作。那么服务器端要如何进行鉴权呢?

NodeJS有难度的面试题,你能答对几个?

加载模块时,为什么每个模块都有__dirname,__filename属性呢,new Module的时候我们看到1.1部分没有这两个属性的,那么这两个属性是从哪里来的

前端有必要去学 Node.js 吗?

可能你看过Node是什么,看过Node的文档,用Node写过一些小项目。但是如果问你——你知道在一线互联网企业里,Node真正是怎么用的吗?是拿来做什么的?怎么做?

开发可伸缩Web应用程序的7个关键Node.js优势

Node.js已成为构建可伸缩Web应用程序的首选技术。由于它提供了许多重要的好处,因此在开发人员中获得了极大的欢迎。 根据Stack Overflow的2020 开发人员调查显示,在一个热情的社区的支持下

用node.js开发一个可交互的命令行应用

在这个教程中,我们会开发一个命令行应用,它可以接收一个 CSV 格式的用户信息文件,教程的内容大纲:“Hello,World”,处理命令行参数,运行时的用户输入,异步网络会话,美化控制台的输出,封装成 shell 命令,JavaScript 之外

NodeJS有什么优势

Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。

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

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

用node探究http缓存

用node搞web服务和直接用tomcat、Apache做服务器不太一样, 很多工作都需要自己做。缓存策略也要自己选择,虽然有像koa-static,express.static这些东西可以用来管理静态资源,但是为了开发或配置时更加得心应手,知其所以然,有了解http缓存的必要。另外,http缓存作为一个前端优化的一个要点,也应该有所了解。

点击更多...

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