解决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_02_理解undefined和null
Oct 11 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
详解微信小程序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
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
2016/05/09 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
使用Python写个小监控
2016/01/27 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python中的函数作用域
2018/05/07 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
Django实现学生管理系统
2019/02/26 Python
python 内置函数汇总详解
2019/09/16 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
关于Java finally的面试题
2016/04/27 面试题
岗位职责定义及内容
2013/11/08 职场文书
会计专业自我评价
2014/02/12 职场文书
2015年读书月活动总结
2015/03/26 职场文书
紧急通知
2015/04/17 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
网聊搭讪开场白
2015/05/28 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2016年安全月活动总结
2016/04/06 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android