[optimize] JS bundle so big when add bindingx .

[PerseveranceZ]

1.Your development environment（weex、weex-toolkit、system and more).

• webpack 3.2.0
• .babelrc

//   babelrc
{
  "presets": [
      ["env", {
          "targets": {
              "modules": false,
              "loose": true,
              "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
      }],
      "stage-0"
  ],
  "plugins": [
    ["component",{
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
    }],
    ["transform-runtime", {
      "polyfill": false,
      "helpers": false
    }]
  ],
  "env": {
      "test": {
          "presets": ["env", "stage-0"],
          "plugins": ["istanbul"]
      }
  }
}

2.Expected behavior and actual behavior.

I want to know why my js bundles so big and how to optimize. Thanks.

3.Steps to reproduce the problem.

when i use weex-ui without bindingx , compiled js bundle info:

when i use weex-ui@0.5.4beta with weex-bindingx , compiled js bundle info:

docs it work in weex-ui without weex-bindingx.

[PerseveranceZ]

oh, many components has imported util.js and util.js imported weex-bindingx.

[tw93]

Thank you for your feedback. We have optimized today.
Please upgrade weex-ui to 0.5.4beta-1 version, At the same time determine whether to open this exclude: /node_modules(?!(\/|\\).*(weex).*)/
Please try again. I'll think about the package optimization.

[tw93]

oh, many component import util.js and util import weex-bindingx.

oh,My carelessness

Update weex-ui to @0.6.0-beta, Try it

[PerseveranceZ]

@tw93 Thank you very much, It's a lot smaller.

I have another question, you can see js/pages/demo/other/weexui.js, this js bundle is be compiled by code, I think it's a lot bigger, do you think?

About weex-bindingx:
I think that rather than dealing with one file's compatible logic, it's better to divide the three files to process their respective logic separately and to quote individually, which will reduce the size of some components.

Sometimes, I really just need binding-parser and some simple compatible code like this in weex pure native project.

import { parse } from 'bindingx-parser'
import _cloneDeep from 'lodash/cloneDeep'

const WeexBinding = weex.requireModule('bindingx')
const BindingxFunction = WeexBinding.bind

let _WeexBinding = _cloneDeep(WeexBinding)

// 重写 bind 方法
_WeexBinding.bind = (options, callback) => {
    if (!options) {
        throw new Error('should pass options for binding')
    }

    options.exitExpression = formatExpression(options.exitExpression)

    if (options.props) {
        options.props.forEach((prop) => {
            prop.expression = formatExpression(prop.expression)
        })
    }

    return BindingxFunction(options, options && options.eventType === 'timing' ? fixCallback(callback) : callback)
}

module.export =  _WeexBinding

[huxiaoqi567]

@PerseveranceZ thank you for your advice. bindingx-parser is an easy way to parse expression that you just write the original expression. I'd build multiple entry files in weex-bindingx@0.0.17, you can quote individually. Just like require('weex-bindingx/lib/index.weex.js') (about 18kb) on weex and require('weex-bindingx/lib/index.web.js') (about 80kb) on web .

[PerseveranceZ]

@huxiaoqi567 @tw93 Perfect! thanks very much.

[tw93]

In addition, you can upgrade weex-ui version to weex-ui@0.6.0-beta-2, currently only using weex of bindingx, Maybe a little bit smaller.

[PerseveranceZ]

@tw93 Cooool~

Finally JS bundle size:

• dev compile:
  
• build compile:
  

@tw93 @huxiaoqi567 thanks for your help!