第一篇，我们先从import开始说起吧。import可能在大家看来是一个非常基础的东西，
但在快应用中，import是否合理使用，是会影响包体大小和代码优雅性的！所以我再讲一讲，大家再听一听。
随着功能的增多，逻辑之间的关系也越来越复杂，日常开发中，我们会写许多工具类js，供页面ViewModel(.ux文件)调用。
比如：util.js，http.js等等。
最早，我的做法是在页面ViewModel需要用到js时，去单独引入。
比如util.js有10个页面用到，就去import 10次。
后来我在排查中发现，这种做法是错误的。
为什么呢？因为快应用并没有使用懒加载的方式，而是在打包时，直接将js打包在了页面文件中。
也就是util.js的代码，被分别复制了10份，放在了每个引入它的页面中。
当import的文件越来越多的时候，只会导致了一个结果，编译出的包很大，而快应用市场对包体大小是有限制的。
小提示：发布APP类快应用时，包体大小不能超过1M
排查出问题后，解决这个问题就变得简单很多，因此我也订了一个开发基本原则：
那具体如何做呢？这里需要2种方案的结合：1、通过this.$app.$def，2：通过global。
为了更好的说明，先定义两个js：util.js和http.js：
util.js，里面有一个方法createShortcut()
-
export default {
-
createShortcut
-
}
复制代码
http.js，里面有一个方法post()
现在我们正式开始！
一、使用this.$app.$def：
第一步，所有的js文件，只在app.ux中引入（其他地方不再引入），如：
-
import http from './http.js'
-
import util from './util.js'
-
-
export default {
-
util: util,
-
http: http
-
}
复制代码
第二步，在页面ViewModel中，便可以直接通过this.$app.$def调用，代码如下：
-
<template>
-
<div>
-
<input type="button" value="创建快捷方式1" onclick="$app.$def.util.createShortcut()"/>
-
<input type="button" value="创建快捷方式2" onclick="createShortcut2()"/>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
createShortcut2() {
-
let util = this.$app.$def.util
-
-
util.createShortcut()
-
}
-
}
-
</script>
复制代码
上面的例子中，演示了一个简单的this.$app.$def的调用过程。对于那些在页面中引入的js，都可以采用这种方式改造，编译后的包体大小会显著下降。
但在实际的项目里，我们可能还会遇到一些更复杂的情况。
比如，在用户【创建快捷方式】以后，需要请求服务器给用户发放一些奖励，
也就是util.createShortcut()里需要调用http.post()方法。
而在上面的例子中，$app.$def是无法在util.js和http.js中被访问到的。
虽然可以学习ViewModel的做法，将$app对象注入到util.js和http.js中，但我们还有另一种更好的选择：
二、使用global
global是Node.js体系中的一个特殊对象，它及其所有属性可以在任何地方被访问到，即全局对象。
具体的改造代码如下：
1、http.js：
-
const $ = Object.getPrototypeOf(global) || global;
-
-
export default $.http = {
-
post
-
}
复制代码
2、util.js：
-
const $ = Object.getPrototypeOf(global) || global;
-
-
export default $.util = {
-
createShortcut() {
-
...
-
...
-
-
//调用$.http.post，请求服务器发放奖励
-
$.http.post(...)
-
},
-
}
复制代码
可以看到，由于通过向global注入，http中的方法可以被访问到了，同样util中的方法也能被全局访问。
注意：向global注入时，请确保变量名是全局唯一的
以上，就是整个import的改造思路了。代码量并不多，非常简洁，但实现的效果却是非常惊人的，包体大小会下降的非常明显，希望对大家有所帮助。
作者末破桑，一个碰巧写了快应用的服务端，关注快应用及快游戏，个人微信：parith。
快应用开发技巧之lock篇
https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=1981
