webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度...
一:背景
因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。
首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。
这里参考一些资料:
webpack4官方文档:webpack.docschina.org/api/module-…
VUE的懒加载:alexjover.com/blog/lazy-l…
二:开始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
]: (参考:makeup1122.github.io/2018/10/12/…)
方法二:降低UglifyJS版本
这里我选第二个,最方便,把uglifyjs-webpack-plugin
降到1.1.1版本:
再打包,终于成了,把HelloWorld1分离出来独立包h-w1
: 大家可以搜索下,h-w1包里面的代码和app包里面的代码是不是隔离的,也可以浏览器访问这包,看看h-w1包的js是不是按需加载的,这里就不贴结果了,我自己测试都是准确的。
项目完整demo:github.com/BothEyes199…
转载于:https://juejin.im/post/5cdc483c6fb9a0323f68c3c7
webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度...相关推荐
- On-Demand Resources Guide中文版(按需加载资源--下)
本文由唧唧歪歪翻译自Apple文档 On-Demand Resources Guide 该文档的上部分包含:按需加载资源基础以及创建和编辑tag两部分 (三)管理按需加载资源 下载和管理按需加载资源 ...
- 快速搭建react项目骨架(按需加载、redux、axios、项目级目录等等)
一.前言 最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
- React Native按需加载 手Q狼人杀探索之路
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/mUzq4NaBHeF3T-NStLzuRw 作者:pe ...
- React Native 按需加载 手Q狼人杀探索之路
导语:最近特别火的狼人杀和最近特别火的React Native会擦出什么样的火花呢?本文和您一同探讨RN性能优化的现实场景. 项目简介: 狼人杀游戏是多人实时性游戏,对流畅度等性能都有要求.作为大型游 ...
- vue按需加载组件-webpack require.ensure(转)
vue按需加载组件-webpack require.ensure 2017年07月28日 09:58:07 A_山水子农 阅读数:23245 标签: vue按需加载组件按需加载webpackrequi ...
- 前端基础建设与架构10 代码拆分和按需加载:缩减 bundle size,把性能做到极致
这一讲,我们将对代码拆分和按需加载这一话题进行解析. 随着 Webpack 等构建工具的能力越来越强,开发者在构建阶段可以随心所欲打造项目流程,代码拆分和按需加载技术在业界曝光量也越来越高.事实上,代 ...
- iOS和tvOS游戏按需加载资源简介
2019独角兽企业重金招聘Python工程师标准>>> 戴维营教育翻译:感谢Davis Allie的An Introduction to On-Demand Resources on ...
- React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
- python 按需加载_基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)...
基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 文档转换为PDF有些图片无法完全显示,请移步我的博客查看 完成 ...
最新文章
- Swift3.0带来的变化汇总系列一——字符串与基本运算符中的变化
- stc单片机 读写flash_STM32单片机基础知识杂谈(1)
- 自动驾驶计算本车离期望轨迹距离的方法
- oracle 新增字段id 并赋值32位_优雅的数据库ID设计
- 读书笔记——数据压缩入门(柯尔特·麦克安利斯)中
- 中国大陆IP过滤器-Java实现
- vce 题库导入_PDF 题库转VCE 文件.docx
- 三年不重装:令电脑百毒不侵的13个妙招
- 苹果描述文件服务器证书无效,iOS 描述文件重新配置失效问题,解决方法!
- Boxy Vehicle Detection in Large Images
- 《IT行业职位介绍-搞懂高级程序员、架构师、技术总监、CTO从薪资到技能的区别》
- 计算机显示器性能指标的是,简述显示器的主要性能指标
- Altium Designer 19 错误警告 Design contains shelved or modified (but not repoured) polygons
- 【图解】AC97、HD音效卡前置音频线的接法
- 羽毛球的主要击球技术
- 字节跳动头条2022测试开发岗 3+1 面经+经验分享(收到offer,入职月薪30K)
- 现代人必备的计算机工具
- 环境振动估算阻尼比 (SDOF)研究(Matlab代码实现)
- 【Coggle 】糖尿病遗传风险检测挑战赛
- 谱聚类算法原理及实现
热门文章
- 非现场执法管理计算机(工业级),浅析非现场执法中存在问题的方法及对策
- 人生苦短我用python梗_为什么说人生苦短,我用Python?
- Linux NGINX 主备,使用keepalived实现主备(以nginx为例)
- scala读取mysql文件_9. Scala操作外部数据 文件读取,xml,Excel,MySQL
- html5自动打印图片,html2canvas生成清晰的图片实现打印代码示例
- kallsyms 压缩_initrd.img、System.map学习札记
- python哪些系统可以运行_python可以检测它在哪个操作系统下运行吗?
- wetool个人版_个人版wetool -公众号
- 汽车租赁php参考文献,国内外汽车租赁文献综述
- Spring Security HttpSecurity.authorizeRequests