详解webpack 打包文件体积过大解决方案(code splitting)


Posted in Javascript onApril 10, 2018

优化对比 :

未优化前:index.html引入一个main.js文件,体积2M以上。

优化后入:index.html引入main.js、commons.js、charts.js、other.js。以达到将main.js平分目的。每个文件控制300k以内.(如果高兴100k也没问题)

用到的一堆库及工具:

vue、webpack、babel、highcharts、echarts、jquery、html2canvas******此去省略若干m代码

问题:

开发环境用webpack后发现单个js文件5m。

生产环境借助vue-cli的webpack配置,减少到2m。

解决方案:

搜索各种解决方案:require.ensure、require依赖、多entry、commonsChunkPlugin****此去省力若干方案

网络类似下边这种上解决方案太多了,但是都达不到预期效果

entry:{ 
 main:'xxx.js',
  chunks:['c1', 'c2'],
  commons:['jquery', 'highcharts', 'echarts','d3', 'xxxxx.js']  
}

 

plugins:{
new commonsChunkPlugin({
name:'commons',
minChunks:2
})  
}

最优解决方案:

entry:{ 
 main:'xxx.js'
}
 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下边return参考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 以下才是关键
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) // 如果愿意,可以再new 一个commonsChunkPlugin
 
}

以上代码打包出来的结果:main.js 、commons.js、charts.js 

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

Javascript 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
Three.js基础部分学习
Jan 08 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
从setTimeout看js函数执行过程
Dec 19 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 #Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 #Javascript
bing Map 在vue项目中的使用详解
Apr 09 #Javascript
详解Vue打包优化之code spliting
Apr 09 #Javascript
node实现基于token的身份验证
Apr 09 #Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 #Javascript
webpack中的热刷新与热加载的区别
Apr 09 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP的分页功能
2007/03/21 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
Python下singleton模式的实现方法
2014/07/16 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python输出决策树图形的例子
2019/08/09 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
工程专业求职自荐书范文
2014/02/08 职场文书
十八大宣传标语
2014/10/09 职场文书
小学优秀学生评语
2014/12/29 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
小学运动会通讯稿
2015/07/18 职场文书