详解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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
JS提交form表单实例分析
Dec 10 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
jQuery插件之validation插件
Mar 29 jQuery
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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
php 在线导入mysql大数据程序
2015/06/11 PHP
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
机械工程师的岗位职责
2013/11/17 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
西门豹教学反思
2014/02/04 职场文书
财务人员担保书
2014/05/13 职场文书
离婚协议书范文2014
2014/10/16 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
经验交流材料格式
2014/12/30 职场文书
活动经费申请报告
2015/05/15 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Python保存并浏览用户的历史记录
2022/04/29 Python