webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度

双眸 2019-05-16 01:06:00 阅读数:23 评论数:0 收藏数:0

一:背景

因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。

首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。

这里参考一些资料:

webpack4官方文档:https://webpack.docschina.org/api/module-methods/#import-

在这里插入图片描述
VUE的懒加载:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
在这里插入图片描述

二:开始demo

首页先启动一个普通的webpack4项目,可以用脚手架,不过需要自己配置一些webpack4特性,这里可以参考:webpack3 项目升级 webpack4

项目起来后,就可以用import实验一番:
在这里插入图片描述
这里我定义了三个界面(HelloWorld1,HelloWorld2,HelloWorld3),其中HelloWorld1用的impot()按需的方式,其他两个都是直接import。

注意:这里的/* webpackChunkName: "h-w1" */
是webpack4中提供的注解,给切割模块命名,如果不要这个注解的话切割出来的模块js不能分辨是那个业务模块的,所以一般都是一个业务模块共用一个名称。

代码这样加了之后,控制台可能会一些错:
在这里插入图片描述
这个错的意思就是不能识别import()的这种写法,因为还需要Babel的支持,网上查了下,需要babel-plugin-dynamic-import-node插件和配置.babelrc文件,那我们就配上:
在这里插入图片描述
在这里插入图片描述
配上这些过后,代码确实没有语法错误了,可以正常启动访问。

但是打包并没有切割开代码:
在这里插入图片描述
这是打的包,并没有看到我们定义的h-w1的包。

这里前前后试了几个插件和配置都不行,语法还是抱错,最后终于试出来了:
1,要么在升级eslint的版本,用5.14以后的;
在这里插入图片描述

2,要么eslint可以用4.19的,但要加上acorn插件;
在这里插入图片描述
这里上面两种方法都可以解决问题,至于前面说的配置.babelrc文件可以还原了,那个加上反而打包没效果了,小白我也不懂。。。。
在这里插入图片描述
最好我们就可以运行:npm run build 看效果了,结果又抱错了:
在这里插入图片描述
从出错信息来看,是UglifyJS不支持ES6的语法。理论上不应该啊…
于是Google之,发现uglifyjs-webpack-plugin 2.0版本的Release日志中,明确提示重新切换回到uglify-js,因为uglify-es被废弃了,如果需要ES6代码压缩,请使用terser-webpack-plugin

解决

方法一:安装并使用[terser-webpack-plugin]:
(参考:http://makeup1122.github.io/2018/10/12/webpack-UglifyJS-issue/)

方法二:降低UglifyJS版本

这里我选第二个,最方便,把uglifyjs-webpack-plugin 降到1.1.1版本:在这里插入图片描述
再打包,终于成了,把HelloWorld1分离出来独立包h-w1
在这里插入图片描述
大家可以搜索下,h-w1包里面的代码和app包里面的代码是不是隔离的,也可以浏览器访问这包,看看h-w1包的js是不是按需加载的,这里就不贴结果了,我自己测试都是准确的。

项目完整demo:https://github.com/BothEyes1993/webpack4_demo


版权声明:本文为[双眸]原创文章
转载请带上:http://copyfuture.com/blogs-details/a7d94af1d2d1e58f5cb9d3e4dca5fecf
或:https://www.cnblogs.com/both-eyes/p/10873155.html


  1. 微博财报电话会议实录:今年会提高广告投资转化率
  2. 里贝里黯然结束拜仁欧冠之旅,“罗贝里”时代终成历史
  3. 境外自驾-6月26日意大利瑞士阿尔卑斯温泉滑雪10天自驾之旅
  4. 全国政协委员罗永章:尽快将防癌体检纳入医保
  5. 游戏音乐外包必须要明白的那些事儿—游戏音乐制作流程
  6. 谷歌一名顶级人工智能专家加入苹果公司
  7. 曾鸣《智能商业》- 读书笔记
  8. win10家庭版设置远程桌面连接
  9. 以宽容之心待人,以义气之心处友,以慈悲之心立世,活真实的自己
  10. 大部分看不了这么悲伤的故事,虽然已经很美化了
  11. 刚刚,数学界“诺奖”Abel Prize迎来首位女性得主
  12. 数据库中悲观锁与乐观锁的总结实践
  13. NoSql数据库使用半年后在设计上面的一些心得
  14. 刘备临死前特意提到一人,可惜诸葛亮不听,丧失了一统天下的机会
  15. 【Android】10.0 UI开发——如何编写程序界面、常见控件的使用
  16. 三大车企联合进军网约车行业,2个月后将在南京上线
  17. 不要让郭台铭跑了
  18. 一支所向无敌的球队为何会变得四分五裂
  19. vue实现菜单权限控制
  20. 文艺到爆炸的句子,第一次读到便为之震撼
  21. Hybrid小程序混合开发之路 - 数据交互
  22. Git教程
  23. 起名取名系列:《红楼梦》中人名地名的谐音隐义
  24. 乔欣风波后杨洋首次公开亮相 丝毫不受绯闻影响 帅气寸头魅力十足
  25. 只要做好3件事,宝宝黄疸7天顺利消退
  26. 痛定思痛的苹果,2019会好吗?
  27. 杜绝“萝卜章”?法大大完成3.98亿元C轮融资 电子签名领域狂吸金 马太效应初现
  28. 甲骨文状告亚马逊竞争美国防部合同“作弊” 招募前雇员竞标合同
  29. “三缸”和“四缸”的区别在哪里?这差距有点大,后悔买错车
  30. 英国史上超长待机王子,做了60年王储,仅次于当今查尔斯王子
  31. 早上喝上一碗,比只喝牛奶要补钙,自己动手给孩子做早餐吧!
  32. 中国研发新型膏体冲压发动机 或已装备霹雳12导弹
  33. JDG不敌RNG,Imp赛后更新微博:我没有打好,对不起
  34. 98年混血萌妹子太养眼,凭着一张让人过目不忘的脸走红ins!
  35. 最作死的游戏商!发公告自曝宣传图都是骗人的,充钱就能吊打别人
  36. 日本程序员节假日全员加班?都是“令和”惹的祸
  37. 青春喂了狗!胜利郑俊英丑闻发酵牵出曾经追过的大势男团成员
  38. 35岁升正厅的重庆官员,再有新职
  39. 【澳洲技术移民】飞出国带你全面解读南澳州担保
  40. 小记Java时间工具类
  41. 凯迪拉克与别克共享动力系统 坚持传统搭配 是什么给了通用勇气
  42. 使用SSH反向隧道进行内网穿透——持续更新中
  43. 拼多多发布财报后股价一路下跌,最大跌幅达15.45%,市值跌破300亿美元
  44. 光速这么快,为什么光撞在身上人却毫无感觉?
  45. 开普勒十年前首次发现的系外行星被“验明身份”
  46. 开发规约(一)接口统一返回值格式
  47. 海量用户积分排名算法探讨
  48. 三步法搞定CTF中的SQL注入题型
  49. MYSQL数据库
  50. 为杨迪自立门户创办《动物情报局》,背后金主令人咋舌!
  51. Uber大曝光:持有滴滴15.4%股权 盈利也靠滴滴
  52. “中国半导体之父”张汝京:一切都可以从头再来
  53. 世界最爱存钱的国家:总储蓄高达38万亿, 比美国还高16万亿元
  54. [I/O]javaI/O工作机制
  55. 陈冠希的第一部电视剧,这恐怕是史上最豪华阵容
  56. 国内第一高楼:高达632米耗时8年才建成,日参观游客量达到三万
  57. 为何哈登5犯保罗11中2替补才14分火箭还能赢?一点已成最大杀招
  58. 【算法大杂烩】常见算法的归类和总结——非对称加密算法
  59. 首篇:关于 996的一些看法
  60. 从阿里云的新边界,看到阿里巴巴的新模样
  61. 为什么国际金融界把台湾看作发展中地区,而不是发达地区?
  62. 任天堂Switch中文版系统上手,这些地方能显示中文了
  63. 韩国批捕两名三星高管 涉嫌会计欺诈
  64. 台积电招人:年薪140万台币!要求还不高
  65. Debian项目领导人职位已有三位侯选者
  66. 你有所不知的