uniapp 打包之后出现shadow-grey.png去除

使用场景：使用HBuilderX 打包编辑uniapp 项目，但是项目在使用之后出现了以域名为cdn.dcloud.net.cn的默认图片。最可恶的是这些图片只在正式环境才会出现，测试环境反而不会出现。关键是这些文件会存在无法访问等问题，导致加载变慢，无法加载等问题。感觉这快就是毒瘤，必须要清除。

问题定位： 我们查遍自己的代码都没有发现这些图片，然后我们就开始查找源码，在查询的时候在打包文件unpackage中查到了很多这个域名的文件，其中包含了shadow-grey.png图片，这些文件主要是uniapp头部加载进度条的默认色彩；这样一看就是HBuilderX底层代码问题，所以我们就开始在源码文件中查找更改。

接下来就是源码更改步骤，大家记得找到HBuilderX 这个开发工具的安装资源文件哈**。**

解决方案：

在以下文件中，找到对应的图片删除即可，其中最好的就是把这些域名为cdn.dcloud.net.cn的，用不到的图片删除。

**文件一：**ProgramFiles\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-mp-360\dist\index.css

**文件二：**ProgramFiles\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\src\platforms\h5\components\page\pageHead.vue

**文件三：**ProgramFiles\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\dist\index.css

**文件四：**ProgramFiles\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-h5\lib\h5\uni.config.js这个文件找到这个方法，更改成这样即可

javascript 复制代码

function transform(content, platformOptions) {
  if (platformOptions.darkmode === true) {
    // darkmode
    try {
      content += fs.readFileSync(
        require.resolve("@dcloudio/uni-h5/dist/index.dark.css")
      );
    } catch (error) {}
  }
  if (process.env.NODE_ENV === "production") {
    return (
      content + // shadow
      "body::after{position:fixed;content:'';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}"
    );
  }
  return content;
}

文件五：ProgramFiles\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-cli-shared\lib\platform.js （这个其实我没有更改哈，因为我们是H5 项目，且没用到这里，所以就没改，不过大家可以更改哈）

javascript 复制代码

//在JS文件中查找这个函数，这里的ruturn 的 url 就是我们需要删除的图片，大家更改return就可以了，直接去除shadow-preload这一段样式就可以了
function getShadowCss () {
  let tagName = 'page'
  if (process.env.UNI_PLATFORM === 'h5') {
    tagName = 'body'
  }
  const url = createShadowImageUrl(getShadowCdn(), 'grey')
  return `${tagName}::after{position:fixed;content:'';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}@-webkit-keyframes shadow-preload{0%{background-image:url(${url})}100%{background-image:url(${url})}}@keyframes shadow-preload{0%{background-image:url(${url})}100%{background-image:url(${url})}}`
}

javascript 复制代码

//查看这个函数，这里就是上面url的来源哈，大家也可以在这里更改自己域名，也可以删除
function createShadowImageUrl (cdn, type = 'grey') {
  let identStr = ''
  if (process.env.UNI_PLATFORM !== 'h5' && process.env.UNI_PLATFORM !== 'web') {
    const ident = createIdent(process.env.UNI_PLATFORM)
    identStr = ident ? `${ident}/` : ''
  }
  return `https://cdn${cdn || ''}.dcloud.net.cn/${identStr}img/shadow-${type}.png`
}

结果测试： 好啦，更改完这些文件之后，重新启动HBuilderX软件，重新打包构建文件之后，在查找unpackage文件就会发现这些shadow-grey.png图片没有啦。到这里大功告成！！！