happypack提升项目构建速度

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


NodeJS沙盒逃逸研究

在这篇文章中,我们将探讨如何使用解释器的内部结构来逃离NodeJS沙箱。Node.js不是一个JavaScript框架,不同于CakePHP、Django、Rails。Node.js更不是浏览器端的库,不能与jQuery、ExtJS相提并论。

Node.js FS模块方法速查

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

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

nodejs的jekins部署

gitlab项目仓库给jekins服务器分配一个账号develop权限用于拉取代码。分支为master。jekins配置打包脚本。思路就是拉取最新代码后,安装相关依赖。删除旧打包文件。新建打包文件项目名.tar.gz。通过SSH传输打包文件项目名.tar.gz到测试服务器指定目录。

NodeJs实现简单的爬虫

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

node.js反向代理的实现

在实际工程开发中,会有前后端分离的需求。使用node.js反向代理的目的:实现前后端分离,前端减少路径请求的所需的路由文件;通过http-proxy-middleware中间件、Http Proxy 模块这2种方式实现node.js的反向代理

使用 Node.js 开发简单的脚手架工具

像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。

Kotlin + Node.js 搭建教程

Kotlin是JetBrains推出的一款语言, 相比Java有更简洁的语法, 能编译为Java Class, 也能编译为JavaScript Node.js则是可以运行在服务端的JavaScript, 这里把二者结合, 搭建一个用Kotlin编写的服务端应用

用node探究http缓存

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

node.js中常用的fs文件系统

node.js中常用的fs文件系统:fs文件系统模块对于系统文件及目录进行一些读写操作。模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。

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

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

小程序专栏: 土味情话心理测试脑筋急转弯