详解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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
javascript event 事件解析
Jan 31 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
JS中的三个循环小结
Jun 20 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue 自定义组件的写法与用法详解
Mar 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
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python实现动态数组的示例代码
2019/07/15 Python
对Django中内置的User模型实例详解
2019/08/16 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
大学生职业规划前言模板
2013/12/27 职场文书
政治学求职信
2014/06/03 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
教师节横幅标语
2014/10/08 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
教师节联欢会主持词
2015/07/04 职场文书
工伤调解协议书
2016/03/21 职场文书
800字作文之大雪
2019/12/04 职场文书
教你怎么用Python操作MySql数据库
2021/05/31 Python
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS