webpack优化 -- happypack
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请查看
webpack优化 -- happypack的更多相关文章
- 浅谈webpack优化
webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和ex ...
- 浅探webpack优化
由于前端的快速发展,相关工具的发展速度也是相当迅猛,各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目,也正式因为这个原因,我们对于脚手架中最关键的一环webpack相 ...
- 常用的webpack优化方法
1. 前言 关于webpack,相信现在的前端开发人员一定不会陌生,因为它已经成为前端开发人员必不可少的一项技能,它的官方介绍如下: webpack 是一个模块打包器.webpack的主要目标是将 J ...
- 记一次真实的webpack优化经历
前言 公司目前现有的一款产品是使用vue v2.0框架实现的,配套的打包工具为webpack v3.0.整个项目大概有80多个vue文件,也算不上什么大型项目. 只不过每次头疼的就是打包所耗费的时间平 ...
- webpack快速入门——实战技巧:webpack优化黑技能
1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- webpack优化之玩转代码分割和公共代码提取
前言 开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码).当项目业务越来越复杂,打包出来 ...
- webpack优化 -- compression-webpack-plugin 开启gzip
webpack优化 -- compression-webpack-plugin 开启gzip 打包的时候开启gzip可以大大减少体积,非常适合于上线部署.下面以vue-cli2.x项目为例,介绍如何在 ...
- webpack优化相关操作
1.缩小文件搜索的范围 • 优化loader配置 尽量精确使用 include 只命中需要的文件. module.exports = { module: { rules: ...
随机推荐
- B站直播 DEMO ijkplayerDemo
http://blog.csdn.net/kengsir/article/details/51750879 一. 下载ijkplayer ijkplayer下载地址 下载完成后解压, 解压后文件夹内部 ...
- oralce管理命令
Emctl start agent TZ set to PRC Oracle Enterprise Manager 10g Database Control Release 10.2.0.1.0 Co ...
- php中实现多线程的的两个方法具体是怎样?
假设你要建立一个服务来检查正在运行的n台服务器,以确定他们还在正常运转.你可能会写下面这样的代码:代码如下: <?php$hosts = array("host1.sample.com ...
- ChaosBlade 发布对 C++ 应用混沌实验的支持
前言 为满足 C++ 应用系统故障演练,阿里妈妈安全生产团队开源了 C++ 混沌实验执行器,填补了 C++ 应用混沌工程实验的空白,其遵循<混沌实验模型>,可通过 ChaosBlade 工 ...
- ThinkPHP5.0中的build.php自动生成所需的目录结构的详细方法
一.来到根目录下,找到bulid.php文件进行改写. 改写方法:保留常用的目录结构,其余按照需求改吧! 二.复制一份build.php文件到application目录下 此时根目录下的bulid.p ...
- Android LruCache源码简介
package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...
- cmd 命令重启远程服务器
今天,连接服务器突然无法连接远程桌面,更无法重新启动机器,先进行了ping 操作: 机器运行正常... 后通过远程软件发现,可以用命令...这是一个新发现 …^ .^ 1.输入cmd 运行正常. ...
- 使用php实现单点登录实例详解
1.首先准备两个虚拟域名 127.0.0.1 www.openpoor.com 127.0.0.1 www.myspace.com 2.在openpoor的根目录下创建以下文件 index.php文件 ...
- python系列之(3)爬取豆瓣图书数据
上次介绍了beautifulsoup的使用,那就来进行运用下吧.本篇将主要介绍通过爬取豆瓣图书的信息,存储到sqlite数据库进行分析. 1.sqlite SQLite是一个进程内的库,实现了自给自足 ...
- 容器云平台使用体验:数人云Crane
数人云在9月6日开通了容器管理面板Crane的试用活动,这是国内首个基于DockerSwarmKit的容器管理工具.它具有Docker原生编排功能,采用轻量化架构,帮助开发者快速搭建DevOps环境, ...