详解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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
js 数据类型判断的方法
Dec 03 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/03 咖啡文化
给初学PHP的5个入手程序
2006/11/23 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP7修改的函数
2021/03/09 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
js Math 对象的方法
2013/09/01 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
基于element-ui的rules中正则表达式
2018/09/04 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
Python抽象类的新写法
2015/06/18 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
台湾家适得:Homeget
2019/02/11 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
2014年消防工作实施方案
2014/02/20 职场文书
大学活动总结模板
2014/07/10 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
Go语言安装并操作redis的go-redis库
2022/04/14 Golang