weex基于js service的文件瘦身方案

weex中页面其实就是一个js文件，这个js文件由页面业务代码和库代码组成。我们可以把库代码抽出来放到远端，供所有页面使用。

weex提供的JS Service技术，它允许我们在页面加载前注入一段js代码，在页面加载后使用。

我们需要把库代码统一放在一个js文件中，再将这个文件放到服务器上。

一般我们的项目有很多的工具类，这些工具类又依赖大量的npm第三方库。要想把这些源码都一起放进service文件里，需要拿到npm第三方库的源码，我们可以使用webpack打包这些npm的第三方库

新建一个js文件，只引用npm的第三方库

// npm_libs.js
const md5 = require('md5');
const qs = require('qs');
...

module.exports = {
  md5,
  qs
}

用webpack打包该js文件，打包后的js需要用全局变量引用里面的module.export

var BasicLib; 
...
module.exports = {
    md5: md5
}
...
BasicLib = module.exports

service文件的代码是这样的，因为工具库可能需要用到weex对象和其它变量，所以在这些变量传进去之后再去构造它们

var npm_libs = ...;

var weex;
var NODE_ENV;

var someutil;
var init_someutil = function () {
    someutil = {
        md5: npm_libs.md5('123')
    }
}

var _init = function () {
    init_someutil();
}

service.register('KSService', {
  create: function(id, env, config) {
    return {
      instance: {
      },
      NormalService: function(_weex, _NODE_ENV) {
        weex = _weex;
        NODE_ENV = _NODE_ENV;
        _init();

        return {
            someutil
        }
      }
    }
  },
  refresh: function(id, env, config){
  },
  destroy: function(id, env) {
  }
})

这样service文件就创建好了，下面看如何使用

var libs = new service.NormalService(weex, 'debug')
console.log(libs.someutil.md5)

但是实际上，我们肯定有很多的工具库，这么多工具库代码全部放在一个js文件里是不合适的，所以我们先按之前的方式将工具库代码放进service文件中，再将它们拆分成多个js文件，以后只对这些js文件进行维护即可

使用脚本合并这些拆分出来的js文件

import os
import sys

root = os.path.abspath('.')

files = ['a', 'b', 'c']

servieFile = root + '/dist/' + 'service.js'

saveto = open(servieFile, 'w')

content = ''

for file in files:
    path = root + '/src/libs/' + file + '.js'

    exist = os.path.exists(path)
    if exist is False:
        print('error: file not exist ' + path)
        sys.exit()
    
    with open(path) as f:
        content = content + '\n' + f.read()
        

saveto.write(content)

print('libs saves to ' + servieFile)

现在我们需要在每次代码修改后自动执行这个合并脚本，可以用webpack的插件实现

// hook这个再执行我们上面写的合并脚本
compiler.plugin('emit', function(compilation, callback) {
     // run py script
});

这样，合并脚本就会在每次打包的时候自动执行了，但是这些拆分的js也会被打进dist目录，我们需要这些无用的文件，这里可以用chokidar监控那个目录，有改动就进行目录删除

const unuseDistFiles = './dist/src';

chokidar.watch(unuseDistFiles).on('all', (event, path) => {
    deleteDir(unuseDistFiles)
});

这样就完成了，也可以在生产环境下使用uglify-es进行js压缩

if (env == 'production') {
    console.log('uglify js ' + path + ' started')

    var code = {
        "file.js": fs.readFileSync(path, "utf8"),
    };
    var options = {
         mangle: false,
        toplevel: true,
        output: {
            beautify: false
        }
    };
    var result = UglifyJS.minify(code, options);

    if (result.error == undefined) {
        fs.writeFileSync(path, result.code, 'utf8')
        console.log('uglify js ' + path + ' successed')
    }
}

由于页面js会依赖这个service文件，所以一定要确保service加载完了再去加载页面js，否则页面会报错。并且这个service文件需要和页面文件一起进行版本管理，保证页面和service版本一致。

在原来的库文件中，去引用新的service即可实现无缝切换。