uni-app 打包出来的H5页面多出uni-app引用链接

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app 打包出来的H5页面多出uni-app引用链接

操作步骤：

  • 任意新建一个项目，打包为h5，访问项目首页，即可复现。

预期结果：

  • 预期正常打开页面，不要加料。

实际结果：

  • 多请求了不是我们自己写的图片引用，导致页面一直加载中。

bug描述：

  • 访问打包的项目，一直处于加载中，核验了一下，发现请求了这么一个URL
    https://cdn.dcloud.net.cn/img/shadow-grey.png
  • 代码中，我们明确是没有写这个引用的。被uni-app加料了。
  • 社区里面也有很多反馈这个问题的。

图片

image

项目信息

项目信息 值
产品分类 uniapp/H5
PC开发环境 Mac
操作系统版本 macOS 14.5
HBuilderX类型 正式
HBuilderX版本 4.15
浏览器平台 Chrome
浏览器版本 所有浏览器都这样，和浏览器无关
项目创建方式 HBuilderX

Harmonyos Next教程
34 回复

请参考：https://ask.dcloud.net.cn/question/177644 https://ask.dcloud.net.cn/question/92823


根本无法解决问题，一样要发起请求。夹带私货的做法也是让人无语。

回复 小明upupup: 怎么重现呢？有没有网址可以重现这个问题？

回复 DCloud_heavensoft: 自己新建一个项目，打包为H5，浏览器里面一访问就是这破玩意。如果还看不到，把浏览器的debug打开，看network的Domain。

回复 小明upupup: 解决方案 ： 在全局css 中写如下代码 ：body::after { content: none !important; }

.uni-page-head-shadow-grey::after { background-image: none !important; }

@keyframes shadow-preload { 0% { background-image: none; }

to { background-image: none; } } 虽说打包文件中还有这个地址 但是实际访问 图片地址不会被加载

回复 d***@163.com: 回复 小明upupup: 不要在index.html 中加 ， 在全局css文件或者scss文件中加

回复 d***@163.com: 在index.html上面加也是可以生效的，但是需要配置index.html，详细的文档可以见文档：自定义模版，需要你在manifest.json中配置h5-template

回复 DCloud_UNI_yuhe: 上面配置index.html时vue2版本需要配置，vue3版本直接在项目根目录下的index.html中配置即可

回复 d***@163.com: 没用的，这个最终还是要取决于浏览器内核的渲染机制，看看会不会先计算了，然后合并渲染，不然的话，无法保证所有浏览器绝对不请求的。

回复 DCloud_UNI_yuhe: 什么时候能把这个去掉呢？社区里面不止一个两个人反馈。

回复 小明upupup: 是这样的，在index.html中配置时，要在<body>前的style标签上加入这个内容，这样<body>在渲染时，就不会渲染低权重的body::fater内容，这样就可以保证，这个请求不会再执行了。 vue2的：

vue3的模版

回复 DCloud_UNI_yuhe: 我们是vue2的，上面的方法试过，在pc上chrome下还是会产生请求，比较影响打开速度。 我们在境外的客户看到就是进度条一直加载不完。

回复 小明upupup: 你在manifet.json中配置了吗？

回复 小明upupup:回复 DCloud_UNI_yuhe: 需要添加下面的内容：

回复 DCloud_UNI_yuhe: 配置了，这个估计是和浏览器内核有关系的，有的内核可能会“先渲染低权重的样式描述，然后用高权重的样式描述再次渲染覆盖之前的”

回复 小明upupup: 方便私信我发一下项目吗？我给你配置一下

回复 DCloud_UNI_yuhe: 感谢，大领导让换技术方案了。

回复 小明upupup: 这不挺好的吗，全部自己开发就没有这么多的问题了，既然选择了用免费的东西，为了提升开发速度，就不要要求那么多，如果真是bug，别人回排期解决的

https://ask.dcloud.net.cn/question/177644
这个帖子也提到了这个问题。 发布时间：2023-09-04 23:59，至今都没有解决。

官方到底是能不能解决，请给个明确的说法，解决不了的话，我们换其他技术方案。

这个问题其他帖子已经回复过如何解决，如果是vue3的话，需要加一个important来提升权重

回复 DCloud_heavensoft: 那叫解决吗？解决就是不要加料。加important只能保证最终选择渲染important的内容，并不能保证浏览器不请求这个链接，并不解决问题。

回复 小明upupup: 这个东西对DCloud本身没有商业价值，起初是为了处理阴影边线。但我觉得这个对开发者也没什么影响，不用的话隐藏掉不影响渲染即可。抽空会去掉它

回复 DCloud_heavensoft: 不知道你是做技术还是搞推广的，对渲染的理解是真应该加强，上一条回复里面已经说过了，不可能做得到不影响的，且还拉速度。回到商业的问题上，就这么一个引用的access log能分析到的数据一堆，一个开发框架加这么一个东西，很不正常，没有那个ide、那个基础库里面这么干的。

回复 小明upupup: 我复核过了，1. 不会请求。2. 这对DCloud没有产生商业价值。既然对开发者没有影响，这是个低优先事项

回复 DCloud_heavensoft: 好，谢谢，我们先迁移用其他技术方案吧

回复 DCloud_heavensoft: 加了个这，就相当于加了个探针，稍微分析一下，哪个应用、请求量、IP、用户分布数据一目了然，老板心里很没有安全感啊，直接让我们换技术方案了。。

回复 小明upupup: “加important只能保证最终选择渲染important的内容，并不能保证浏览器不请求这个链接”，这句话你的理解是错的，你可以自己测试一下，加上important后，浏览器是不会再发出请求的。

回复 DCloud_UNI_CHB: 做了7年浏览器的人告诉你，这取决于浏览器渲染引擎 是咋实现的。。。

回复 小明upupup: 浏览器的渲染引擎就3家，你试试chrome、safari、firefox，哪个有问题？

在处理uni-app打包出来的H5页面中多出uni-app引用链接的问题时，这通常是由于uni-app框架在构建过程中自动注入了相关的库和样式文件。为了确保H5页面的纯净性和优化加载速度，我们可以手动调整打包配置，尽量减少不必要的引用。以下是一些可能的解决方法和相关代码案例：

1. 自定义Webpack配置

在uni-app项目中，你可以通过vue.config.js文件自定义Webpack配置。这允许你精确地控制哪些文件被打包进去。

// vue.config.js
const path = require('path');

module.exports = {
  configureWebpack: {
    externals: {
      // 假设你想排除某个库，比如 'uni-app-lib'
      'uni-app-lib': 'window.uniAppLib'
    },
    plugins: [
      // 你可以在这里添加或移除插件
    ]
  },
  chainWebpack: config => {
    // 移除特定的loader或plugin
    config.module.rules.delete('some-loader-rule');
    config.plugins.delete('some-plugin');

    // 添加自定义的alias
    config.resolve.alias
      .set('@components', path.resolve(__dirname, 'src/components'))
      .set('@assets', path.resolve(__dirname, 'src/assets'));
  }
};

2. 调整manifest.json配置

在uni-app项目的manifest.json文件中，你可以配置一些与打包相关的选项，比如是否包含基础库代码等。

{
  "mp-weixin": { // 以微信小程序为例
    "appid": "your-app-id",
    "setting": {
      "es6": true,
      "enhance": true,
      "postcss": true,
      "compileType": "miniprogram",
      "usingComponents": true,
      "permission": {},
      "window": {}
    },
    "usingComponents": false, // 控制是否使用组件化
    "libVersion": "2.23.3", // 指定基础库版本
    "cloudfunctionRoot": "cloudfunctions/",
    "condition": {}
  }
}

注意：这里的配置是针对小程序的，H5的配置可能会有所不同，但思路相似，你需要检查并调整与H5打包相关的选项。

3. 清理HTML模板

在pages.json或static目录下的HTML模板文件中，确保没有不必要的<script>或<link>标签引用uni-app的内部库。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Uni-App</title>
  <!-- 只保留必要的CSS和JS引用 -->
  <link rel="stylesheet" href="/static/css/main.css">
  <script src="/static/js/main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

通过上述方法，你可以更精细地控制uni-app打包出来的H5页面中的引用链接，确保只包含必要的资源。

回到顶部