前言

如何快速提高Laya構(gòu)建速度 微信小游戲推出之后，很多公司也相應(yīng)的進(jìn)入到微信小游戲這個領(lǐng)域，現(xiàn)在市場上的游戲開發(fā)引擎，如Cocos、Egret、Laya都對小游戲有了很好的兼容性。而在實際開發(fā)中，如何提高Laya的構(gòu)建速度，是游戲開發(fā)者非常想要解決的問題之一，下面，我們就來給大家梳理下。

一、默認(rèn)的Laya構(gòu)建方式

Laya在使用IDE默認(rèn)創(chuàng)建項目后(本文選擇typescript語言)，會在當(dāng)前項目目錄下，新建一個為.laya的文件夾。默認(rèn)生成的編譯配置文件為

其中compile.js為開發(fā)時默認(rèn)運(yùn)行文件，這里如果開發(fā)者是mac系統(tǒng)，使用F8編譯項目后，可能都會報以下錯誤：

通過報錯提示，這里如果出錯的話，將compile.js名稱改為gulpfile.js，并且，將文件內(nèi)gulp運(yùn)行的默認(rèn)task改為'default'。

通過compile.js文件可知，默認(rèn)的Laya構(gòu)建方式是，使用gulp、browserify進(jìn)行項目構(gòu)建，tsify編譯typscript，vinyl-source-stream用于將tsify構(gòu)建的node stream轉(zhuǎn)化為gulp能識別的stream文件。所以我們每次修改ts源碼，都需要手動點(diǎn)擊編譯或者使用F8編譯。并且，就Laya的3D示例項目，每次編譯的時間基本在1s~2s。

二、改進(jìn)的Laya構(gòu)建方式

對于web前端開發(fā)，可能都會配置webpack+webpack-hot-middleware之類進(jìn)行代碼熱更新，開發(fā)web網(wǎng)頁的流程基本就是：修改代碼 -> 自動編譯 -> 自動刷新，倘若有兩個屏幕，開發(fā)者不需要去刷新瀏覽器、輸入命令重新編譯等機(jī)械重復(fù)的行為。既然Laya默認(rèn)使用了browserify（其實browserify這幾年更新已經(jīng)很慢了），這里我們可以加入gulp.watch，觀察src目錄源文件，每當(dāng)src下文件發(fā)生修改時，自動觸發(fā)編譯操作，相當(dāng)于開發(fā)者不需要再按F8編譯。

但是這種方式，相當(dāng)于gulp重新進(jìn)行編譯，實際編譯速度依然不快。那么問題來了，有沒有辦法編譯對時候，gulp只編譯修改的那部分，從而加快編譯速度？

三、使用watchify監(jiān)聽文件變化并結(jié)合browserify-sync自動刷新

通過gulp官網(wǎng)可了解到watchify到相關(guān)使用，這里我們將代碼改成，并結(jié)合browser-sync,帶來自動刷新網(wǎng)頁的功能。

1. `const watchedBrowserify = watchify(browserify({`2. `basedir: workSpaceDir,`3. `debug: false,`4. `entries: ['src/Main.ts'],`5. `cache: {},`6. `packageCache: {}`7. `}).plugin(tsify));`8. `// 記錄watchify編譯ts的時候是否出錯，出錯則不刷新瀏覽器let isBuildError = false;`9. `gulp.task("build", () => {`10. `return watchedBrowserify`11. `.bundle()`12. `.on('error', (...args) => {`13. `isBuildError = true;`14. `gutil.log(...args);`15. `})`16. `.pipe(source('bundle.js'))`17. `.pipe(gulp.dest(workSpaceDir + "/bin/js"));`18. `});`20. `gulp.task("watch", ['build'], () => {`21. `// 瀏覽器開發(fā)時自動刷新頁面`22. `browserSync.init({`23. `port: 3002, // 監(jiān)聽端口，這里注意是否和其他項目沖突`24. `server: {`25. `watchFiles: ["../bin/"], // 刷新網(wǎng)頁的監(jiān)控目錄`26. `baseDir: "../bin/"`27. `}`28. `});`29. `// watchify監(jiān)聽文件刷新`30. `watchedBrowserify.on("update", () => {`31. `isBuildError = false;`32. `runSequence('build', () => {`33. `if(!isBuildError) { // 沒有編譯錯誤時，刷新瀏覽器界面`34. `browserSync.reload();`35. `}`36. `});`37. `});`38. `// 打印watchify編譯日志`39. `watchedBrowserify.on("log", gutil.log);`40. `});`

其中，runSequence用于同步執(zhí)行g(shù)ulp任務(wù)，多次實踐，這里還需要加入變量isBuildError，在代碼編譯出錯時，不執(zhí)行browserSync的刷新。最終效果：

編譯速度快了近10倍，瀏覽器也能自動刷新了，能極大地提高程序員的工作效率。

總結(jié)

以上是生活随笔為你收集整理的identity_insert 如何改为on_十分钟教你如何快速提高Laya构建速度，还不快来康康？...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。