详解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 相关文章推荐
表单提交验证类
Jul 14 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
vue路由教程之静态路由
Sep 03 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
Python中的闭包实例详解
2014/08/29 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书