- Creator 版本:2.3.2
导出微信小游戏工程后发现project.js文件超过了500KB,导致微信跳过了ES6转ES5的操作
所以出现async/await失效的情况,游戏无法运行了。
删了部分代码,勉强在498KB可以了。
但这不是长久之计,而且之后还有更多需求,所以想问下这个project.js怎么优化下,是否可以拆分?谢谢
已解决:使用分包功能
导出微信小游戏工程后发现project.js文件超过了500KB,导致微信跳过了ES6转ES5的操作
所以出现async/await失效的情况,游戏无法运行了。
删了部分代码,勉强在498KB可以了。
但这不是长久之计,而且之后还有更多需求,所以想问下这个project.js怎么优化下,是否可以拆分?谢谢
已解决:使用分包功能
你好,这个问题你解决了吗?我也遇到这个问题了,删代码不是长久之计,我后面还有新的功能要添加
ts用async/await完全没问题。js不知道
ts打完包也是会被编译成js的,楼主的project.js就是编译过后的
试着把project.js的一些es6高级函数的工具函数提取出来试一试。
这个是用gulp写的一个工具,可以试一试。
打包出来的project有很多的重复函数awaiter、generator、decorate、assign、generator。
去project.js中找到这些关键字后面的function函数,替换下面的let变量,这个是我一个项目中的优化效果。
let projectPath = ‘…/…/code/build/wechatgame/src’;
let projectName = ‘project.js’;
let ASSIGN = function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t};
let EXTENDS = function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(e,n)};return function(e,n){function o(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}};
let AWAITER = function(t,e,n,o){return new(n||(n=Promise))(function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){t.done?i(t.value):new n(function(e){e(t.value)}).then(a,s)}c((o=o.apply(t,e||[])).next())})};
let DECORATE = function(t,e,n,o){var i,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(r<3?i(a):r>3?i(e,n,a):i(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a};
let GENERATOR = function(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return c([t,e])}}function c(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=(i=a.trys).length>0&&i[i.length-1])&&(6===r[0]||2===r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}};
gulp.task(‘computed_prev_size’, function () {
let s = size();
return gulp.src([${projectPath}/${projectName}])
.pipe(s)
.pipe(gulp.dest(projectPath))
.pipe(notify({
onLast: true,
message: () => 替换前的文件大小为:${s.prettySize}
}));
});
gulp.task(‘computed_over_size’, function () {
let s = size();
return gulp.src([${projectPath}/${projectName}])
.pipe(s)
.pipe(gulp.dest(projectPath))
.pipe(notify({
onLast: true,
message: () => 替换后的文件大小为:${s.prettySize}
}));
});
gulp.task(‘replace_assign’, function () {
return gulp.src([${projectPath}/${projectName}])
.pipe(replace(ASSIGN, ‘ASSIGN’))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘replace_extends’, function () {
return gulp.src([${projectPath}/${projectName}])
.pipe(replace(EXTENDS, ‘EXTENDS’))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘replace_awaiter’, function () {
return gulp.src([${projectPath}/${projectName}])
.pipe(replace(AWAITER, ‘AWAITER’))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘replace_decorate’, function () {
return gulp.src([${projectPath}/${projectName}])
.pipe(replace(DECORATE, ‘DECORATE’))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘replace_generator’, function () {
return gulp.src([${projectPath}/${projectName}])
.pipe(replace(GENERATOR, ‘GENERATOR’))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘inject_tools’, function () {
let tool1 = let __ASSIGN__ = ${__ASSIGN__};;
let tool2 = let __EXTENDS__ = ${__EXTENDS__};;
let tool3 = let __AWAITER__ = ${__AWAITER__};;
let tool4 = let __DECORATE__ = ${__DECORATE__};;
let tool5 = let __GENERATOR__ = ${__GENERATOR__};;
let tools = [
tool1,
tool2,
tool3,
tool4,
tool5
];
return gulp.src(${projectPath}/${projectName})
.pipe(header(tools.join(’\n\n’)))
.pipe(gulp.dest(projectPath))
});
gulp.task(‘file_compress’, function () {
return pipeline(
gulp.src(${projectPath}/${projectName}),
uglify({
compress: {
// 过滤 console
drop_console: false,
// 过滤 debugger
drop_debugger: true
}
}),
gulp.dest(projectPath)
);
});
gulp.task(‘default’, gulp.series(
‘computed_prev_size’,
‘replace_assign’,
‘replace_extends’,
‘replace_awaiter’,
‘replace_decorate’,
‘replace_generator’,
‘inject_tools’,
‘file_compress’,
‘computed_over_size’
));
代码可以分包,怎么做到的,之前我有研究代码分包到子包,但是用到了引擎分离,不太好使。
有用到引擎分离插件吗?
我的意思就是用ts写的async/await编译成js后,project.js大于500K完全没问题,毕竟我的就1.1M了。但如果只是js写的async/await,打包后有没有问题我就不知道了,因为没用过
用Bundle分包,位于Bundle里面的ts/js会独立成一个单独的物理文件。使用包里的js需要load bundle后用require(“ModuleName”)
嗯,我的不是project.js文件大于500k,我的creator版本是2.4.3,打出出来后工程里面的所有脚本被编译成一个文件index.js放在main文件夹里面,这个index.js文件大于了500k,出现了上述相同的问题
是不是这样理解,本来是这样应用的:
import SailMapCtr from “…/…/…/subpackets/packet2/prefabs/uiCtrs/SailMapCtr”;
但我把脚本用bundle分包后,需要这样引用:
require("…/…/…/subpackets/packet2/prefabs/uiCtrs/SailMapCtr"); 该路径改成bundle文件夹对应的路径即可?
好像是下面这个样子,这个有js源码,你去查查 SailMapCtr 就知道commonjs的模块名了。
require(“SailMapCtr”)