解决webpack打包速度慢的解决办法汇总


Posted in Javascript onJuly 06, 2017

刚开始用webpack,谈一谈解决webpack打包慢的问题的方法

技巧1

webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用。其实这是错误的使用方式。

正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍。

技巧2

webpack配合的React,jQuery一些共有的库去使用,虽然没写几行代码却发现我靠打个文件居然好几M了。能不能不让这些共有库打入我们的文件呢?

externals: 
    {
      'antd':true,
      'react': 'React',
      'react-dom': 'ReactDOM'
    }

在webpack配置文件的根上加上这些内容。告诉webpack在require(“react”)的时候不要去加载模块,直接去读(这里还不是很明白,有的说“:”后面是window.React,写了后面可以直接使用无需require,待确定后再补充,一般写true就可以了),当然这种方式要在html入口手动引入js文件:

<script src="node_modules/react/dist/react-with-addons.js"></script>
<script src="node_modules/react-dom/dist/react-dom.min.js"></script>
<script src="node_modules/antd/dist/antd.min.js"></script>

在项目中正常使用require(“react”)试试,不会被打进去了,文件变为了几k,突然感觉webpack这东西还是能用的。

技巧3

大部分情况下通过技巧2已经可以搞定大部分问题了,但是在用MaterialUI的时候,点击事件总是报一个错误,大概意思是重复的引入了react什么的。如果出现这个问题,那么请使用技巧3。将那些共有的模块打进另外一个文件中,然后使用CommonsChunkPlugin插件,在webpack ?watch非第一编打包的时候就不会重复的打另外一个文件了。

entry: {
    //这是我自己文件的入口,换成自己的
    main: './apps/main.jsx',
    //这个是把外面的东西打包成common.js
    'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']

  },
plugins: [
    //把common.js变为共有的,除第一遍打包后就不会再打包了
    new webpack.optimize.CommonsChunkPlugin('common', 'common.js')
  ]
output: {
    path: path.resolve(containerPath,'dist/'),
    filename: '[name].js'
  }

在webpack配置文件的根上加上这些内容,在html入口处需要引入common.js

//确认一下是不是第一回打包后这个文件已经有了
<script src="dist/common.js"></script>

这种方式在webpack -watch后第一遍依旧很慢(因为要打common) 之后修改默认打包是就不会再打common了。而且还有一个优点就是不用再引React,jquery一堆文件了,只引common一个文件就ok。

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

Javascript 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
react build 后打包发布总结
Aug 24 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
详解微信小程序Radio选中样式切换
Jul 06 #Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
详解vue渲染从后台获取的json数据
Jul 06 #Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 #Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 #Javascript
vue-cli如何添加less 以及sass
Jul 06 #Javascript
微信小程序 跳转传递数据的实例
Jul 06 #Javascript
You might like
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
js变量提升深入理解
2016/09/16 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Vue实现图书管理小案例
2020/12/03 Vue.js
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
部队学习十八大感言
2014/01/11 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
家属联谊会致辞
2015/07/31 职场文书
学校财务管理制度
2015/08/04 职场文书
自荐信范文
2019/05/20 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
详解Python中*args和**kwargs的使用
2022/04/07 Python