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最主要的还是图片压缩哪一块，才能从

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

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

转载于:https://juejin.im/post/5ce909206fb9a07ef443e2cf