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最主要的仍是圖片壓縮哪一塊，才能從

根本解決遊戲打開速度，樓主能想到的辦法是隻要圖片不失幀，模糊就讓美術儘可能作小圖，如

果有更好的辦法歡迎留言～