Cocos Creator 取经之路—加载优化一

作者: poxiao 分类: Egret-Laya-Cocos 发布时间: 2019-06-01 19:52

一.js压缩,去掉没有的模块

这个功能是cocos creator来帮助完成的,可以在设置中去掉你项目中没用到的模块

二.preload

通过link标签使cocos.js提前于其他js文件加载,MDN对rel=preload的描述:

元素的 rel 属性的属性值preload能够让你在你的HTML页面中 元素内部书写一些声明式的资源获取请求,可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。

代码如下:
html <link rel="preload" href="cocos2d-js-min.07114.js" as="script">

三.使用 gulp 合并 静态文件,减少请求数

思路如下:

  1. 通过gulp-file-inline把style-mobile.css,settings.js,main.js inline到html文件,减少请求
  2. 通过gulp-htmlmin把html文件压缩,减少空格,压缩代码量,减少文件体积

准备工作

安装gulp

gulp安装请访问:https://gulpjs.com/

nodejs安装请访问:http://nodejs.org/

另外需要安装gulp相关插件:gulp-file-inline gulp-htmlmin

安装好 nodejs之后

进入到项目录,在项目目录打开命令行工具

执行:

创建package.json

注意:将entry point 改为gulpfile.js

创建gulpfile.js文件

在项目生成gulp

执行后,会在项目的文件夹中生成一个node_modules文件夹

安装插件:

使用方法如下:

  • 执行命令行 cnpm install
  • 执行打包命令 gulp

 

参考资料:

记一次cocos项目的加载速度优化

Cocos Creator—优化首页打开速度

Gulp实例(包括环境搭建的自动检测)

gulp简要教程

前端构建工具gulpjs的使用介绍及技巧

本文链接:Cocos Creator 取经之路---加载优化一

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:破晓(http://www.code2048.net),谢谢!^^


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注