Cocos Creator 取经之路—加载优化一
一.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 合并 静态文件，减少请求数
思路如下：
- 通过gulp-file-inline把style-mobile.css，settings.js，main.js inline到html文件，减少请求
- 通过gulp-htmlmin把html文件压缩，减少空格，压缩代码量，减少文件体积
准备工作
安装gulp
gulp安装请访问：https://gulpjs.com/
nodejs安装请访问：http://nodejs.org/
另外需要安装gulp相关插件：gulp-file-inline gulp-htmlmin
安装好 nodejs之后
进入到项目录，在项目目录打开命令行工具
执行：
|
1 |
npm install --global gulp-cli |
创建package.json
|
1 |
npm init |
注意：将entry point 改为gulpfile.js
|
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文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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)); }); |
在项目生成gulp
|
1 |
npm install --save-dev gulp |
执行后，会在项目的文件夹中生成一个node_modules文件夹
安装插件：
|
1 |
npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev |
|
1 |
npm install --save-dev gulp-file-inline |
使用方法如下：
- 执行命令行 cnpm install
- 执行打包命令 gulp
参考资料：
