提升接近7倍编译速度！laya小游戏开发技巧

视频演讲稿件
B站视频

Laya增量编译

本次课件在Laya2.7.1 环境进行，其他版本未作测试

**

素材资源在文章底部末尾

今天讲的内容是 提升Laya的编译速度
（webpack+增量编译+自动编译 ）

前后对比图如下
Laya自带的编译速度

启用webpack编译

提升速度=7.7/1.27 ≈6.4 倍

(视频演示效果)

开始讲解详细的操作

首先把准备好的素材拷贝到项目跟目录


拷贝完毕后

在终端输入npm run dev，这时后台会执行文件监控任务，只要文件发生变化就会触发增量编译
在浏览器输入既可以看到效果

http://localhost:8080/bin/index.html

为了方便增加一个运行方式

编辑launch.json
增加以下代码
{
“name”: “webpack调试”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:8080/bin/index.html”,
// “换成自己的谷歌安装路径，”: 比如
//window 默认安装路径为: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe”
//mac 系统上的默认安装路径为 “/Applications/Google Chrome.app/Contents/MacOS/Google Chrome”;
// “runtimeExecutable”: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe”,
“runtimeArgs”: [
“–allow-file-access-from-files”,
" --disable-web-security",
“–auto-open-devtools-for-tabs”
],
“sourceMaps”: true,
“webRoot”: "$workspaceRoot",//假如谷歌调试报userDataDir不可用，请把谷歌安装路径取得管理员权限,或者更换${tmpdir}为其他可以读写的文件夹，也可以删除。
“userDataDir”: “KaTeX parse error: Expected '}', got 'EOF' at end of input: … "src/*": "{workspaceRoot}/src/*”
}
}

只要编写完代码后，刷新浏览器即，无需等待

常见事项：

因为采用了http协议访问项目，项目有进行http访问的话 会存在跨域问题导致http协议通信失败
关闭安全检查
前端在开发中经常会遇到跨域的问题，如果出现跨域，控制台会出现如下提示：

1. 在你的在电脑上新建一个目录，例如：C:\MyChromeDevUserData；

2. 在桌面找到你的chrome浏览器图标，右键–属性，在属性页面中的目标输入框里加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData，–user-data-dir的值就是刚才新建的目录。

3. 然后点击确定，关闭属性界面。

启动浏览器，如果浏览器出现了如下图所示的提示，则配置成功了。

因为 npm run dev 并不会在真正发布代码
所以 要发布游戏时，运行npm run build 或者通过Laya IDE 编译即可

目前还没有配置好断点功能，需要断点的话，采用Laya默认的运行方式既可

额外话题：
在这里为了在laya中便捷使用webpack，已经把webpack的从安装到配置集成了一个包，
如果有需求想对webpack进行更深一步学习，开发者可以查阅相关资料

感谢观看本次视频

群内资源解压码:csdn666

或

链接：https://pan.baidu.com/s/1CW6ekwlrucEsvTB-GQWEbQ
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦