webpack优化 -- happypack

前言：happypack是一个可以开启多线程转换loader的插件，可以在开发环境下提高编译速度，下面用vue-cli 2.x配合happypack优化一下vue项目。?

步骤

下载安装happypack

在本文中，vue-cli是2.x版本的(不是3.0版本)，webpack是3.6.0，happypack是最新的5.0.1。

//安装
npm install happypack -D

改造webpack

找到build/webpack.base.conf.js, 修改module.rules的内容，并添加plugins属性

//修改前
module:{rules:[{test: /\.vue$/,loader: 'vue-loader',options: vueLoaderConfig},......]
}//修改后
module:{rules:[{test: /\.vue$/,loader: 'happypack/loader?id=vue'},......]
},//新增的plugins配置
plugins:[new HappyPack({id:'vue',loaders:[{loader:'vue-loader',options:vueLoaderConfig  //*}]}),......
]

上面只给出vue的配置，其他的loader改造都是一样的，注意原来在rules里面的options选项要放在new HappyPack里面配置，不然会报错的。

问题

该插件并不完美，目前在处理图片的时候，就有bug,所以目前不建议在处理图片的loader上使用happypack。? 具体bug请查看

转载于:https://www.cnblogs.com/blogs-xlf/p/11362238.html

webpack优化 -- happypack相关推荐

Webpack优化总会让你不得不爱
在家的日子不能出去玩,不能出去吃,的确是很不开心的,不过也是真的增加了好多空闲时间与其在家呆着无聊,不如安安静静的学习一下疫情期间,不管怎样,心态不能崩,武汉加油,中国加油闲言少叙,现在我们就开 ...
vscode安装swift插件_使用 Webpack 优化 VS Code 插件加载性能
Webpack 这一 JS 模块打包神器相信大家都不陌生了.由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式,因此也可以使用 Webpack 打包,优化性能. 经过实测,经过 ...
webpack优化系列(1)-HMR
webpack优化要做哪些方面呢? 开发环境性能优化优化打包构建速度优化代码调试生产环境性能优化优化打包构建速度优化代码运行性能(提高用户体验) 那么怎么优化呢? 当我们修改样式文件,实际上 ...
【优化】1288- 分享我的webpack优化经验，首屏渲染从9s到1s
今天给大家分享一篇性能优化实战.本文基于vue2(虽然vue3已出,但是本文也很实用) 谈到webpack优化大部分人可能都看腻了,无非就那几招嘛,我之前也是看过许多类似的文章,但都没有自己真正上手过 ...
1. webpack打包速度的优化----happyPack
webpack打包优化的目的 (1). 使打包的体积更小: (2). 使打包的速度更快: 1. 如何使打包的速度更快: (1). 用happypack提升项目的构建速度:happypack只作用在lo ...
vue项目中使用 webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
webpack优化之HappyPack实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
webpack优化之HappyPack 实战
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做. 我们需要Webpack 能同一时间处理多个任务,发挥多核 C ...
20、webpack优化(5)——happyPack多线程打包
happyPack多线程打包如何实现多线程打包? 安装happypack npm i happypack 改造webpack.config.js,实现多线程打包js let HappyPack = ...

webpack优化 -- happypack

webpack优化 -- happypack

步骤

下载安装happypack

改造webpack

问题

webpack优化 -- happypack相关推荐

最新文章

热门文章