一个让weex打包后js文件减少220KB的方法

wulie88 commented 3 years ago

我是吴烈，从2017年开始使用Weex，非常感谢这个开源项目。

Describe the bug

最近在学习jsfm时候发现自带Vue环境，而Weex Cli打包时候又内置了Vue，运行时重复，造成js文件体积大。

补充: 正常打包时候不会内置，自己引入了Vue才会出现内置Vue，如：引入了Vue当eventBus

import Vue from 'vue';
export default new Vue();

目前我是通过Webpack设置成外部Vue，再打包，生成的页面js体积减少220KB，只有业务代码，我们代码控制在100KB以内，以上是没有压缩的情况下，开启gzip后几乎不要流量。

在iOS及安卓上测试通过。

externals: {
    'vue': 'Vue'
},

大家可以把Vue配置成外部，以便项目中再引用Vue造成重复。

ps：请加在webpack的WeexConfig中，WebConfig还是需要内置Vue

使用最新的weex cli配置的多页应用。

两张截图

大家都可以试试，有问题发评论，我会及时回复。

BBBOND commented 3 years ago

如果可以的话，辛苦贴一下webpack的配置及相关版本，本地验证后无效。我这边的做法是增加tree shaking配置，也减少了很大一部分包体积。

wulie88 commented 3 years ago

如果可以的话，辛苦贴一下webpack的配置及相关版本，本地验证后无效。我这边的做法是增加tree shaking配置，也减少了很大一部分包体积。

正常打包时候不会内置，自己引入了Vue才会出现内置Vue，如：引入了Vue当eventBus，我补充说明了。

cnryb commented 3 years ago

可以尝试一下 JSService，可以大幅度降低 js bundle 体积。 https://weex.apache.org/zh/docs/api/js-service.html

Handandbrainofking commented 3 years ago

如果可以的话，辛苦贴一下webpack的配置及相关版本，本地验证后无效。我这边的做法是增加tree shaking配置，也减少了很大一部分包体积。

weex工程tree shaking 的webpack配置可以贴一下吗？

Handandbrainofking commented 3 years ago

直接在webpack中设备external，观察到打包出来的boundle的体积还是一样大，没变化

wulie88 commented 3 years ago

直接在webpack中设备external，观察到打包出来的boundle的体积还是一样大，没变化

你可以在代码中加入如下几行测试，注意打包后的代码内容及文件尺寸。

import Vue from 'vue';
export default new Vue();