详解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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
再谈JavaScript线程
Jul 10 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
js 函数的副作用分析
2011/08/23 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Python lxml模块安装教程
2015/06/02 Python
python小程序实现刷票功能详解
2019/07/17 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
Ruby如何定义一个类
2012/10/08 面试题
农民致富事迹材料
2014/01/23 职场文书
老公给老婆的保证书
2014/04/28 职场文书
关键在于落实心得体会
2014/09/03 职场文书
售后客服个人自我评价
2014/09/14 职场文书
初中家长评语大全
2014/12/26 职场文书
小学生差生评语
2014/12/29 职场文书
让生命充满爱观后感
2015/06/08 职场文书
Python基础详解之邮件处理
2021/04/28 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL
Python实现信息管理系统
2022/06/05 Python