webpack 入口和出口的最佳实践

入口和出口的最佳实践 {ignore}

具体情况具体分析

下面是一些经典场景

一个页面一个JS

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

源码结构

|—— src|—— pageA   页面A的代码目录|—— index.js 页面A的启动模块|—— ...|—— pageB   页面B的代码目录|—— index.js 页面B的启动模块|—— ...|—— pageC   页面C的代码目录|—— main1.js 页面C的启动模块1 例如:主功能|—— main2.js 页面C的启动模块2 例如:实现访问统计的额外功能|—— ...|—— common  公共代码目录|—— ...

webpack配置

module.exports = {entry:{pageA: "./src/pageA/index.js",pageB: "./src/pageB/index.js",pageC: ["./src/pageC/main1.js", "./src/pageC/main2.js"]},output:{filename:"[name].[chunkhash:5].js"}
}

这种方式适用于页面之间的功能差异巨大、公共代码较少的情况,这种情况下打包出来的最终代码不会有太多重复

一个页面多个JS

在这里插入图片描述

源码结构

|—— src|—— pageA   页面A的代码目录|—— index.js 页面A的启动模块|—— ...|—— pageB   页面B的代码目录|—— index.js 页面B的启动模块|—— ...|—— statistics   用于统计访问人数功能目录|—— index.js 启动模块|—— ...|—— common  公共代码目录|—— ...

webpack配置

module.exports = {entry:{pageA: "./src/pageA/index.js",pageB: "./src/pageB/index.js",statistics: "./src/statistics/index.js"},output:{filename:"[name].[chunkhash:5].js"}
}

这种方式适用于页面之间有一些独立、相同的功能,专门使用一个chunk抽离这部分JS有利于浏览器更好的缓存这部分内容。

思考:为什么不使用多启动模块的方式?

单页应用

所谓单页应用,是指整个网站(或网站的某一个功能块)只有一个页面,页面中的内容全部靠JS创建和控制。 vue和react都是实现单页应用的利器。

在这里插入图片描述

源码结构

|—— src|—— subFunc   子功能目录|—— ...|—— subFunc   子功能目录|—— ...|—— common  公共代码目录|—— ...|—— index.js

webpack配置

module.exports = {entry: "./src/index.js",output:{filename:"index.[hash:5].js"}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/829943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab学习007-已知离散时间系统的系统函数并使用matlab绘制该系统的零极点图;判断系统的稳定性;幅频和相频特性曲线

目录 题目 离散时间系统的系统函数:H(z)(3*z^3-5*z^210z)/(z^3-3*z^27*z-5) 1,绘制该系统的零极点图 1)零极点图 2)代码 2,判断系统的稳定性 1)判断结果 2)代码 3,试用MATL…

闲话 ASP.NET Core 数据校验(一):内置数据校验

前言 所谓输入的是垃圾,输出也必然是垃圾,有多少安全问题隐藏在请求的数据中,所以永远不能相信来自用户端的输入。 对请求数据的合法性进行校验,不仅有助于提升用户界面的友好性,而且有助于提高后台程序的安全性和稳…

【车载开发系列】UDS诊断时间参数说明

【车载开发系列】UDS诊断时间参数说明 一. 应用层诊断时间参数 1)P2 CAN_Client 诊断仪成功发送诊断报文请求之后到收到 ECU回复诊断响应的超时时间间隔 2)P2 CAN_Server ECU 接收到诊断请求之后到开始发送诊断报文的时间间隔,一般默认最…

二维码门楼牌管理应用平台建设:场所检查的新模式

文章目录 前言一、二维码门楼牌管理应用平台的优势二、场所检查记录的重要性三、二维码门楼牌管理应用平台在场所检查中的应用四、二维码门楼牌管理应用平台的未来展望 前言 随着信息技术的飞速发展,二维码作为一种高效、便捷的信息识别方式,正逐渐渗透…

服务器数据恢复—存储硬盘坏道,指示灯亮黄色的数据恢复案例

服务器数据恢复环境&故障: 一台某品牌EqualLogic PS系列某型号存储,存储中有一组由16块SAS硬盘组建的RAID5磁盘阵列,RAID5上划分VMFS文件系统存放虚拟机文件。存储系统上层一共分了4个卷。 raid5阵列中磁盘出现故障,有2块硬盘…

二极管钳位型光伏逆变并网建模simulink仿真

整理了二极管钳位型光伏逆变并网建模simulink仿真,效果明显,附赠仿真报告。适合小白 二极管钳位型光伏逆变并网是将光伏发电系统中的直流电能转换为交流电能,并与电网连接。在此仿真中使用最大功率点追踪(MPPT)技术&a…

基于CANoe从零创建以太网诊断工程(2)—— TCP/IP Stack 配置的三种选项

🍅 我是蚂蚁小兵,专注于车载诊断领域,尤其擅长于对CANoe工具的使用🍅 寻找组织 ,答疑解惑,摸鱼聊天,博客源码,点击加入👉【相亲相爱一家人】🍅 玩转CANoe&…

微信第三方开放平台,实现代公众号保留排版样式和图片发布文章

大家好,我是小悟 要想实现代公众号发布文章的功能,就得接入富文本编辑器,市面上富文本编辑器有很多,轻量的、重量的都有。 从开发者的角度,自然把轻量作为第一选择,因为好对接,怎么方便怎么来…

在win下,python如何调用.so库

#撰写c代码 #通过gcc命令编译成.so库 gcc -shared -o ./lib/pointlib.so point.c #python调用.so库 #运行结果 觉得本文对你有用,麻烦点赞或关注或收藏,你的肯定是我创作的无限动力,谢谢!!!

制作一个RISC-V的操作系统十四-任务同步和锁

文章目录 并发与同步临界区和锁锁死锁解决死锁自旋锁(spin lock)原子性问题原子操作实现amoswap.w.aq例子 另一种方法自旋锁的注意事项代码其他同步技术 并发与同步 控制流:可理解为任务或进程 中断也可以理解为一个切换到另一个任务&#…

C++智能指针详解

目录 一. 智能指针初识 1.1 什么是智能指针 1.2 智能指针历史历程 1.3 为什么需要智能指针 1.3.1 内存泄漏 1.3.2 防止内存泄漏 1.3.3 异常的重新捕获 二. 智能指针的原理与使用 2.1 智能指针的原理 2.2 智能指针的使用 2.3 智能指针的拷贝问题…

docker网络和模式

Docker使用Linux桥接,在宿主机虚拟一个Docker容器网桥(docker0),Docker启动一个容器时会根据Docker网桥的网段分配给容器一个IP地址,称为container-IP,同时Docker网桥是每个容器的默认网关。因为在同一宿主机内的容器都接入同一个…

mars3d开发过程中点击面图层飞行定位,设置俯仰角度后,layer.flyTo({没有生效的排查思路

mars3d开发过程中点击面图层飞行定位,设置俯仰角度后,layer.flyTo({没有生效的排查思路记录,给大家提供一下以后排查定位问题的方向 问题场景相关代码: 1.项目本身代码: 2.精简了关键性代码后,就可以去ge…

【博客经验分享】博客小白在CSDN是如何做到一周内涨粉1800的

🎓我(异构算力老群群-CSDN博客)是在今年3月份才开始写博客的,目的是做一个博士🎓期间的笔录;在CSDN这个技术分享与交流的平台🌐,我近期实现了一个令人振奋的成就——那就是一周内涨粉…

纯血鸿蒙APP实战开发——评论组件案例实现

介绍 评论组件在目前市面上的短视频app中是一种很常见的场景,本案例使用全局状态保留能力弹窗来实现评论组件。点击评论按钮弹出评论组件,点击空白处隐藏该组件,再次点击评论按钮则会恢复上一次浏览的组件状态。 效果图预览 使用说明 点击…

CUDA的基础知识

文章目录 数据精度CUDA概念线程&线程块&线程网络&计算核心GPU规格参数内存 GPU并行方式数据并行流水并行张量并行混合专家系统 数据精度 FP32 是单精度浮点数,用8bit 表示指数,23bit 表示小数;FP16 是半精度浮点数,用…

L1-041 寻找250

作者 陈越 单位 浙江大学 对方不想和你说话,并向你扔了一串数…… 而你必须从这一串数字中找到“250”这个高大上的感人数字。 输入格式: 输入在一行中给出不知道多少个绝对值不超过1000的整数,其中保证至少存在一个“250”。 输出格式&a…

【进程通信】利用管道创建进程池(结合代码)

文章目录 什么叫进程池进程池的优点 创建进程池代码实现: 什么叫进程池 我们知道,一个进程创建子进程通常是为了让这个子进程去为它完成某个任务。例如我们使用的指令,其实就是bash进程创建子进程让子进程去执行的。但是我们需要考虑这样一个…

【介绍下分布式系统】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

wegame启动游戏错误代码126,加载x3daudio1_7.dll失败的修复教程

在尝试通过WeGame平台启动某款游戏时,遇到了阻碍,系统反馈了一个特定的错误代码“错误代码126,加载x3daudio1_7.dll失败”。这个错误提示表示游戏无法加载x3daudio17.dll文件,导致游戏无法正常启动。经过一番研究和尝试&#xff0…