javascript - 使用gulp inject还是iframe？

Question

这是我写一个html页面，我现在想要让右边刷新，导航栏不刷新。或者是整体刷新。

导航栏的代码：

<nav class="sidebar sidebar-offcanvas" id="sidebar">    <ul class="nav">        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#my_homepage" aria-expanded="false"                aria-controls="my_homepage">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">我的首页</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="my_homepage">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">我的信息</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">银行公告</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">最新提醒</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">我的资产负债</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#my_account" aria-expanded="false"                aria-controls="my_account">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">我的账户</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="my_account">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">账户管理</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">账户概览</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">交易明细查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">他行账户管理</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">资金归集账户设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">资金归集管理</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">资金明细查询</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#interbank_transfer" aria-expanded="false"                aria-controls="interbank_transfer">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">转账汇款</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="interbank_transfer">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">行内转账</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">注册账户互转</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">跨行转账</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">批量转账</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">批量转账查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">转账结果查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">联行号查询</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#bill_payment " aria-expanded="false"                aria-controls="bill_payment">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">缴费支付</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="bill_payment">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">自助缴费</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">缴费查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">缴费设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">缴学费</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">缴学费查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">彩票站点缴费</a>                        <a class="nav-link" href="#">体彩缴款</a>                        <a class="nav-link" href="#">体彩缴款记录查询</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#personal_loans " aria-expanded="false"                aria-controls="personal_loans">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">个人贷款</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="personal_loans">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">个人贷款</a>                        <a class="nav-link" href="#">个人贷款查询</a>                        <a class="nav-link" href="#">小微贷查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">贷款试算</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">个贷产品展示</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">家园e贷</a>                        <a class="nav-link" href="#">申请进度查询</a>                        <a class="nav-link" href="#">贷款详情</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#credit_card " aria-expanded="false"                aria-controls="credit_card">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">信用卡</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="credit_card">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">申办与激活</a>                        <a class="nav-link" href="#">卡片激活</a>                        <a class="nav-link" href="#">办卡进度</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">账户管理</a>                        <a class="nav-link" href="#">综合查询</a>                        <a class="nav-link" href="#">资料修改</a>                        <a class="nav-link" href="#">密码修改</a>                        <a class="nav-link" href="#">信用卡挂失</a>                        <a class="nav-link" href="#">信用卡补发</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">额度管理</a>                        <a class="nav-link" href="#">额度查询</a>                        <a class="nav-link" href="#">调额申请</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">账单查询</a>                        <a class="nav-link" href="#">已出账单</a>                        <a class="nav-link" href="#">未出账单</a>                        <a class="nav-link" href="#">账单维护</a>                        <a class="nav-link" href="#">授权历史交易查询</a>                        <a class="nav-link" href="#">授权未入帐交易查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">信用卡还款</a>                        <a class="nav-link" href="#">本行主动还款</a>                        <a class="nav-link" href="#">本行约定还款</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">分期信贷</a>                        <a class="nav-link" href="#">账单分期</a>                        <a class="nav-link" href="#">消费分期</a>                        <a class="nav-link" href="#">现金分期</a>                        <a class="nav-link" href="#">预借现金</a>                        <a class="nav-link" href="#">转账历史查询</a>                        <a class="nav-link" href="#">分期查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">支付管理</a>                        <a class="nav-link" href="#">网上支付设置</a>                        <a class="nav-link" href="#">银联无密闪付</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">积分管理</a>                        <a class="nav-link" href="#">积分查询</a>                        <a class="nav-link" href="#">我的活动</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">增值保障</a>                        <a class="nav-link" href="#">动账短信提醒设置</a>                        <a class="nav-link" href="#">消费提示</a>                        <a class="nav-link" href="#">用卡须知</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">随用金服务</a>                        <a class="nav-link" href="#">透支转账</a>                        <a class="nav-link" href="#">随意金汇总查询</a>                        <a class="nav-link" href="#">随意金明细查询</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#financial_products " aria-expanded="false"                aria-controls="financial_products">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">理财产品</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="financial_products">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">产品超市</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">风险评估</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">持有理财产品</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">我的定投</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">在途交易</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">待兑付产品</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">交易明细查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">贵金属签约</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#my_savings " aria-expanded="false"                aria-controls="my_savings">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">我的储蓄</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="my_savings">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">定期互转</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">通知存款</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">智能通知存款</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">易得利</a>                        <a class="nav-link" href="#">我的易得利</a>                        <a class="nav-link" href="#">易得利签约/解约</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">月月息</a>                        <a class="nav-link" href="#">月月息产品</a>                        <a class="nav-link" href="#">我的月月息</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">特色储蓄</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">大额存单</a>                        <a class="nav-link" href="#">大额存单产品</a>                        <a class="nav-link" href="#">我的大额存单</a>                        <a class="nav-link" href="#">我要转让</a>                        <a class="nav-link" href="#">我的抓让</a>                        <a class="nav-link" href="#">转让专区</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">活期盈</a>                        <a class="nav-link" href="#">活期盈产品</a>                        <a class="nav-link" href="#">我的活期盈</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#my_online_banking " aria-expanded="false"                aria-controls="my_online_banking">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">我的网银</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="my_online_banking">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">用户名设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">网银操作日志</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">短信签约查询</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">快捷菜单设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">收款人名册维护</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">缴费提醒设置</a>                    </li>                </ul>            </div>        </li>        <li class="nav-item">            <a class="nav-link" data-bs-toggle="collapse" href="#security_center " aria-expanded="false"                aria-controls="security_center">                <i class="mdi mdi-account menu-icon"></i>                <span class="menu-title">安全中心</span>                <i class="menu-arrow"></i>            </a>            <div class="collapse" id="security_center">                <ul class="nav flex-column sub-menu">                    <li class="nav-item">                        <a class="nav-link" href="#">安全设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">交易限额设置</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">手机银行限额签约</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">证书更新</a>                    </li>                    <li class="nav-item">                        <a class="nav-link" href="#">账户安全锁</a>                    </li>                </ul>            </div>        </li>    </ul></nav>

对应页面被注释包裹，然后替换上去的代码
脚本：

'use strict'var gulp = require('gulp');var requireDir = require('require-dir');gulp.paths = {    dist: 'dist',};var paths = gulp.paths;requireDir('gulp-tasks')gulp.task('default', gulp.series('serve'));

做的尝试：
整体刷新：使用gulp inject的命令，我单独写了页头，导航栏，页脚的页面，每当我想要修改的时候，我就只修改单独的这些页面，然后执行gulp inject命令，然后gulp就会根据我页面中的特定注释包裹的地方替换掉对应的代码。
确实可以，不过会多出很多代码，冗余代码很多。但是我不知道这样做是否对页面性能有影响？是否应该使用iframe标签？

疑问就是：用iframe还是gulp？

Answer 1

1. 通常来说，我们自己写的代码需要存入版本工具的，才算代码，如果是通过构建工具输出的，那个叫做产物，不算源代码，所以不存在冗余代码这个说法。事实上如果要用iframe，每个页面你还得多写一些html框架头尾，那才是冗余呢。
2. iframe页面在实际使用中可能会有一些限制（脚本交互、cookie等），并不是很方便，所以我们一般避免使用
3. 如果你的项目足够简单，场景很单一，也可以考虑用iframe，优点也很突出，就是不用考虑页面样式干扰什么的，每个iframe都很独立。