阅读 593

CocosCreator 「游戏打包优化」

最近在做cocoscreator的项目,也就避免不了项目打包优化,下面给大家分享一下个人的打包优化,方法很简单

1.图片压缩方面

网址      1.不涉及功能方面的图片,可以让美术按照手机尺寸375px进行图片的制作

              2.然后就是用网址连接去压缩图片,挺好用的一个网址,强力推荐

2.代码方面

         1.⚠️(切记)  用过很多很多次的api一定要封装,这样简化代码,不会显得代码冗余

         2.⚠️(切记) 千万不要用console.log,要使用官方推荐的cc.log 因为打包的时候会                                      自动忽略cc.log,如果你非要使用console.log可以自己封装一个函数,                                    打包的时候把他return出去

3.⚠️「重点」gulp压缩代码与图片

         首先全局安装gulp,楼主在这里使用的yarn,至于为什么不用npm,国内的墙你懂                 的,当然cnpm也可以

        具体安装步骤                          

                   

yarn
 版本 mac步骤 sudo yarn install gulp -g win步骤 yarn install gulp -g 

                 npm 版本   mac步骤  sudo  npm install gulp -gwin步骤   npm install gulp -g 

               cnpm版本  mac步骤  sudo cnpm install gulp -g   win步骤 cnpm install gulp -g

下面在项目根目录下创建一个gulpfile.js

内部代码具体如下图:



具体代码如下:

var gulp = require("gulp");

/* 压缩图片 */var imagemin = require("gulp-imagemin");/* 开启gzip压缩 */var gzip = require('gulp-gzip');gulp.task('imagemin', function (cb) {    gulp.src('./build/web-mobile/**/*.{png,jpg,jpeg}')        .pipe(imagemin([            imagemin.gifsicle({interlaced: true}),            imagemin.jpegtran({progressive: true}),            imagemin.optipng({optimizationLevel: 5})        ]))        .pipe(gulp.dest("./build/web-mobile/"))        .on("end", cb);});/*  压缩根目录js文件 */gulp.task('gzip', async() => {   await gulp.src('./build/web-mobile/*.js',)    .pipe(gzip())    .pipe(gulp.dest('./build/web-mobile/'));});/*  压缩src下js */gulp.task('gzipSrc', async() => {    await gulp.src('./build/web-mobile/src/*.js')     .pipe(gzip())     .pipe(gulp.dest('./build/web-mobile/src/')); });/* 压缩css */ gulp.task('gzipCssSrc', async() => {    await gulp.src('./build/web-mobile/*.css')     .pipe(gzip())     .pipe(gulp.dest('./build/web-mobile/')); });复制代码

下面讲解一下创建步骤

 第一步 =>  在根目录下                                      npm init -y 

第二步  =>  本地安装gulp 及所需要的插件      yarn  add gulp gulp-gzip gulp-imagemin

第三步 =>   安装依赖                                          yarn   或者 npm install 或者 cnpm install

第四步 =>   项目打包                                         cocoscreator 傻瓜式一键打包 不选择项目中不 

                                                                             用的功能(⚠️切记)

第五步  =>  打开package.json 配置一下         具体如下图所示


第六步 => 在控制台执行yarn start 或者 npm start 或者cnpm start

第七步 => 漫长的等待...等你看到楼主上面的图片的状态就证明打包成功,在build目录下结                        构  如下图

会出现.gz格式的文件,这时候让后台或者运维配合开启服务端的gzip压缩功能,然后直接把

build包丢给运维,搞定~

楼主也是现学现卖,打包代码中有很多需要优化的地方,比如gzip压缩哪一块,打包速度奇慢

还会导致cpu飙升,如果gulp玩的好的大佬欢迎留言~

其实这些打包虽然优化了打开速度,但是cocoscreator最主要的还是图片压缩哪一块,才能从

根本解决游戏打开速度,楼主能想到的办法是只要图片不失帧,模糊就让美术尽量做小图,如

果有更好的办法欢迎留言~