creator 静态属性_Cocos Creator 取经之路—加载优化一

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

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

二.preload

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

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

代码如下:

html

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

思路如下：

通过gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，减少请求

通过gulp-htmlmin把html文件压缩，减少空格，压缩代码量，减少文件体积

准备工作

安装gulp

安装好 nodejs之后

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

执行：

Java

npm install --global gulp-cli

1

npminstall--globalgulp-cli

创建package.json

Java

npm init

1

npminit

注意：将entry point 改为gulpfile.js

JavaScript

{

"name": "你的项目名称",

"version": "1.0.0",

"description": "",

"main": "gulpfile.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC"

}

1

2

3

4

5

6

7

8

9

10

11

{

"name":"你的项目名称",

"version":"1.0.0",

"description":"",

"main":"gulpfile.js",

"scripts":{

"test":"echo \"Error: no test specified\" && exit 1"

},

"author":"",

"license":"ISC"

}

创建gulpfile.js文件

JavaScript

var gulp = require('gulp');

var fileInline = require('gulp-file-inline');

//var clean = require('gulp-clean');

var htmlmin = require('gulp-htmlmin');

gulp.task('default', function(cb) {

gulp.src('./build/fb-instant-games/*.html')

.pipe(fileInline())

.pipe(htmlmin({

collapseWhitespace:true,

removeComments: true

}))

.pipe(gulp.dest('./build/fb-instant-games/')

.on('end', cb));

});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

vargulp=require('gulp');

varfileInline=require('gulp-file-inline');

//var clean = require('gulp-clean');

varhtmlmin=require('gulp-htmlmin');

gulp.task('default',function(cb){

gulp.src('./build/fb-instant-games/*.html')

.pipe(fileInline())

.pipe(htmlmin({

collapseWhitespace:true,

removeComments:true

}))

.pipe(gulp.dest('./build/fb-instant-games/')

.on('end',cb));

});

在项目生成gulp

Java

npm install --save-dev gulp

1

npminstall--save-devgulp

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

安装插件：

Java

npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev

1

npminstallgulp-minify-cssgulp-concatgulp-uglifygulp-imagemingulp-cleangulp-renamegulp-htmlmin--save-dev

Java

npm install --save-dev gulp-file-inline

1

npminstall--save-devgulp-file-inline

使用方法如下：

执行命令行 cnpm install

执行打包命令 gulp

参考资料：