有什么不明白的地方，扫描右方二维码加我微信交流。

通过使用CocosCreator制作Facebook的playable Ad这篇文章受到启发，既然可以把所有文件都打进一个包，那么我也可以控制一下，把想要打进index.html里的打进去。

点击这里查看H5优化方案1，本篇博客是优化方案的进阶。

通过打包之后的加载我们可以看到，代码文件project.js，引擎文件cocos-min.js，配置文件setting.js，启动文件main.js，启动时的logo文件splash.png，共5个文件，每个文件都会占用一个请求，所以把5个文件的请求也都融合到index.html中。

修改index.html文件

先构建出一个web-mobile的版本，然后在这里面修改，把settings.js和main.js的引入标签注释或删除，并在body标签里添加如下标签：

<script type="text/javascript" charset="utf-8">
    {#settings}
</script>
<script type="text/javascript" charset="utf-8">
    {#cocosengine}
</script>
<script type="text/javascript" charset="utf-8">
    {#project}
</script>
<script type="text/javascript" charset="utf-8">
    {#main}
</script>

把style-mobile.css的引入标签删除，并添加如下标签：

<style>
    {#style-mobile}
</style>

修改style-mobile.css文件

将splash.png修改为{#splash}。

修改main.js文件

把文件最下方的对cocos2d引擎文件的引入注释，但要保留boot()方法和此方法上面的一行调试代码，再向上找把project.js文件的引入的相关代码全部注释。

把index.html，style-mobile.css，main.js，splash.png文件拷贝到build-templates/web-mobile/文件夹下，不知道build-templates目录有什么用的同学，点击查看官方文档。

创建合并文件的python脚本，代码如下：

#!/usr/bin/python
# -*- coding: UTF-8 -*-

from xml.dom.minidom import parse
import xml.dom.minidom
import json
import os
import time
import sys
import codecs
import cgi
import HTMLParser
import re
import base64

if sys.getdefaultencoding() != 'utf-8':
  reload(sys)
  sys.setdefaultencoding('utf-8')

#设置路径
RootDir = os.getcwd() + '/web-mobile'
print('current dir', RootDir)

#设置要合并或者最终要删除的文件
htmlPath = RootDir + '/index.html'
settingScrPath = 'settings'
mainScrPath = 'main'
engineScrPath = 'cocos2d-js-min'
projectScrPath = 'project'
splashSrcPath = 'splash'
mobileCssSrcPath = 'style-mobile'
desktopCssSrcpath = 'style-desktop'

#设置要替换的字符串，我们在前面的步骤中在html添加的一些标签内容就是这些，目的是使用replace方法替换掉标签的内容
settingMatchKey = '{#settings}'
mainMatchKey = '{#main}'
engineMatchKey = '{#cocosengine}'
projectMatchKey = '{#project}'
splashMatchKey = '{#splash}'
cssMatchKey = '{#style-mobile}'

#寻找文件，因为h5版本如果使用md5打包，则可能导致每次生成的文件名称不一样，所以要寻找一下文件
def getSearchPath (filePath):
  fileList = os.listdir(filePath)
  for fileName in fileList:
    absPath = filePath + '/' + fileName
    if (os.path.isdir(absPath)):
      getSearchPath(absPath);
    elif (os.path.isfile(absPath)):
      fileExtName = os.path.splitext(absPath)[1]
      if fileExtName == '.js':
        global settingScrPath
        global mainScrPath
        global engineScrPath
        global projectScrPath
        global splashSrcPath
        global mobileCssSrcPath
        global desktopCssSrcpath

        if absPath.find(settingScrPath) > -1:
          settingScrPath = absPath
        elif absPath.find(mainScrPath) > -1:
          mainScrPath = absPath
        elif absPath.find(engineScrPath) > -1:
          engineScrPath = absPath
        elif absPath.find(projectScrPath) > -1:
          projectScrPath = absPath

      elif fileExtName == '.png':
        if absPath.find(splashSrcPath) > -1:
          splashSrcPath = absPath
      elif fileExtName == '.css':
        if absPath.find(mobileCssSrcPath) > -1:
          mobileCssSrcPath = absPath
        elif absPath.find(desktopCssSrcpath) > -1:
          desktopCssSrcpath = absPath

#图片转换成base64格式，代码则原样返回
def read_in_chunks(filePath, chunk_size=1024*1024):
  print filePath
  extName = os.path.splitext(filePath)[1]
  if extName == '.png':
    file_object = open(filePath, 'rb')
    return 'data:image/png;base64,' + base64.b64encode(file_object.read())
  else:
    file_object = open(filePath)
    return file_object.read()
  
def start():
  htmlStr = read_in_chunks(htmlPath)
  htmlStr = htmlStr.replace(settingMatchKey, read_in_chunks(settingScrPath), 1)
  htmlStr = htmlStr.replace(projectMatchKey, read_in_chunks(projectScrPath), 1)
  htmlStr = htmlStr.replace(mainMatchKey, read_in_chunks(mainScrPath), 1)
  htmlStr = htmlStr.replace(engineMatchKey, read_in_chunks(engineScrPath), 1)
  htmlStr = htmlStr.replace(cssMatchKey, read_in_chunks(mobileCssSrcPath), 1)
  htmlStr = htmlStr.replace(splashMatchKey, read_in_chunks(splashSrcPath), 1)

  os.remove(settingScrPath)
  os.remove(projectScrPath)
  os.remove(mainScrPath)
  os.remove(engineScrPath)
  os.remove(mobileCssSrcPath)
  os.remove(splashSrcPath)
  os.remove(desktopCssSrcpath)
  os.rmdir(RootDir + '/src')

  writeToPath(htmlPath, htmlStr)

def writeToPath(path, data):
  with open(path,'w') as f: # 如果filename不存在会自动创建， 'w'表示写数据，写之前会清空文件中的原有数据！
    f.write(data)

if __name__ == '__main__':
  getSearchPath(RootDir)
  start()

执行脚本。

如果有问题可以在下方留言。

性感码农，在线解答。