详解webpack 热更新优化


Posted in Javascript onSeptember 13, 2018

前言

随着项目的界面越来越多,webpack的热更新越来越慢,有时会达到5,7s之久,这对于开发效率影响是非常巨大的。

分析过程

于是今天就针对这个分析了一下热更新慢的原因,步骤如下

首先先在package中的启动命令加上

--progress --watch --colors --profile

先解释一下这几个参数的含义

  • --progress 构建进度
  • --watch 实时监测
  • --profile 编译过程中的步骤耗时时间

加上了这几个参数,重启项目,就可以开始观察耗时时间了,修改了某个文件之后,查看控制台,如下

详解webpack 热更新优化

图中红色部分就是耗时最长的地方了,好了,发现了耗时时间长的地方了,经过百度搜索,发现也有个问题和我这个非常类似,他的原因是因为使用了uglifyJsPlugin插件,这么一想,我的项目中的webpack配置中也用到了这个插件,于是把这个插件移到生产环境中使用,修改之后重启项目,修改某个文件之后,查看控制台,如下

详解webpack 热更新优化

效果非常惊人,总的耗时已经在1,2s之内了,效率提高了不少!!如果也有这种烦恼的小伙伴也可以试一下哦

另一种解决方案

这种方案的思路为,开发环境中,每人负责的都是一部分模块或者组件,所以热更新可以只编译自己当前需要的页面,而没必要把所有的页面全部编译。创建一个 selfConfig.js 设置需要保存的页面,然后在 webpack 配置中,配置,只属于需要的页面去编译热更新。加快开发环境中的编译速度。

// selfConfig.js
module.exports = [
'imScence',
'mLogin'
];
// webpack.base.conf.js 
// 部分关键代码
const selfConfig = require("./selfConfig");

for (let moduleName of modules) {
if (selfConfig.length === 0) {
devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
} else {
if (selfConfig.includes(moduleName)) {
devEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}
}
buildEntries[moduleName] = path.join(resolve('src'), 'modules', moduleName, 'main.js');
}

以上事例设置完成后,只会热更新两个页面,但是这种方案的弊端是,其他页面本地环境将是白屏打不开(因为压根没编译),所以这种方案还是根据适合自己的场景使用。

注意: 每次修改 selfConfig.js 需要重起 webpack 服务。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
如何用js控制css中的float的代码
Aug 16 Javascript
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 #Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
php简单实现数组分页的方法
2016/04/30 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
用jscript启动sqlserver
2007/06/21 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
Yahoo-PHP面试题1
2016/07/20 面试题
乡镇交通安全实施方案
2014/03/29 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
python中数组和列表的简单实例
2022/03/25 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript