快应用开发技巧之import篇

zephyrtune

不知不觉开发快应用已经大半年了，个人整理了一些开发方面的小技巧，供大家参考下吧。 第一篇，我们先从import开始说起吧。import可能在大家看来是一个非常基础的东西， 但在快应用中，import是否合理使用，是会影响包体大小和代码优雅性的！所以我再讲一讲，大家再听一听。 随着功能的增多，逻辑之间的关系也越来越复杂，日常开发中，我们会写许多工具类js，供页面ViewModel(.ux文件)调用。 比如：util.js，http.js等等。 最早，我的做法是在页面ViewModel需要用到js时，去单独引入。 比如util.js有10个页面用到，就去import 10次。 后来我在排查中发现，这种做法是错误的。 为什么呢？因为快应用并没有使用懒加载的方式，而是在打包时，直接将js打包在了页面文件中。 也就是util.js的代码，被分别复制了10份，放在了每个引入它的页面中。 当import的文件越来越多的时候，只会导致了一个结果，编译出的包很大，而快应用市场对包体大小是有限制的。

小提示：发布APP类快应用时，包体大小不能超过1M

排查出问题后，解决这个问题就变得简单很多，因此我也订了一个开发基本原则：

所有的js只import一次

那具体如何做呢？这里需要2种方案的结合：1、通过this.$app.$def，2：通过global。 为了更好的说明，先定义两个js：util.js和http.js： util.js，里面有一个方法createShortcut()

1. export default {
2. createShortcut
3. }

复制代码

http.js，里面有一个方法post()

1. export default {
2. post
3. }

复制代码

现在我们正式开始！ 一、使用this.$app.$def：第一步，所有的js文件，只在app.ux中引入（其他地方不再引入），如：

1. import http from './http.js'
2. import util from './util.js'
4. export default {
5. util: util,
6. http: http
7. }

复制代码

第二步，在页面ViewModel中，便可以直接通过this.$app.$def调用，代码如下：

1. <template>
2. <div>
3. <input type="button" value="创建快捷方式1" onclick="$app.$def.util.createShortcut()"/>
4. <input type="button" value="创建快捷方式2" onclick="createShortcut2()"/>
5. </div>
6. </template>
8. <script>
9. export default {
10. createShortcut2() {
11. let util = this.$app.$def.util
13. util.createShortcut()
14. }
15. }
16. </script>

复制代码

上面的例子中，演示了一个简单的this.$app.$def的调用过程。对于那些在页面中引入的js，都可以采用这种方式改造，编译后的包体大小会显著下降。 但在实际的项目里，我们可能还会遇到一些更复杂的情况。 比如，在用户【创建快捷方式】以后，需要请求服务器给用户发放一些奖励， 也就是util.createShortcut()里需要调用http.post()方法。 而在上面的例子中，$app.$def是无法在util.js和http.js中被访问到的。 虽然可以学习ViewModel的做法，将$app对象注入到util.js和http.js中，但我们还有另一种更好的选择：

注入到global

二、使用globalglobal是Node.js体系中的一个特殊对象，它及其所有属性可以在任何地方被访问到，即全局对象。 具体的改造代码如下： 1、http.js：

1. const $ = Object.getPrototypeOf(global) || global;
3. export default $.http = {
4. post
5. }

复制代码

2、util.js：

1. const $ = Object.getPrototypeOf(global) || global;
3. export default $.util = {
4. createShortcut() {
5. ...
6. ...
8. //调用$.http.post，请求服务器发放奖励
9. $.http.post(...)
10. },
11. }

复制代码

可以看到，由于通过向global注入，http中的方法可以被访问到了，同样util中的方法也能被全局访问。

注意：向global注入时，请确保变量名是全局唯一的

以上，就是整个import的改造思路了。代码量并不多，非常简洁，但实现的效果却是非常惊人的，包体大小会下降的非常明显，希望对大家有所帮助。 作者末破桑，一个碰巧写了快应用的服务端，关注快应用及快游戏，个人微信：parith。

---

快应用开发技巧之lock篇 https://bbs.quickapp.cn/forum.php?mod=viewthread&tid=1981

zhu1

如何测试或者打开文件看import了10次，也复制了10次呢