详解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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 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
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
javascript 建设银行登陆键盘
2008/06/10 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Python中的迭代器漫谈
2015/02/03 Python
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python实现感知器
2017/12/19 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
单位接收函格式
2015/01/30 职场文书
植树节新闻稿
2015/07/17 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js