[apache/echarts]使用webpack打包构建echarts,打包后的文件非常大,但只是引入了radar.js

2024-07-04 145 views
7
One-line summary [问题简述]

我使用的是echarts 3.4.0版本。参考百度echarts官网例子,官网的例子如下: 在 webpack 中使用 ECharts

发现用webpack构建后,js文件没有像官网中说的那样,体积很小,而是有2.1兆,我只引入了部分组件,如下:

var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/radar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

这个页面是demo页面,只引入了echarts的组件,所以不会受到其他的组件的干扰。

Version & Environment [版本及环境]
  • ECharts version [ECharts 版本]: echarts 3.4.0
  • Browser version [浏览器类型和版本]: firefox 47, chrome 52
  • OS Version [操作系统类型和版本]: win7
Expected behaviour [期望结果]

希望打完包后,体积如官网上所说的那样,体积变小。

ECharts option [ECharts配置项]
option = {
                color :['blue'],
        title : {
            text:""
        },
        backgroundColor : null,
        tooltip : {
            trigger: 'axis',
            formatter: function (params,ticket,callback) {
                var index = params[0].dataIndex;
                var showValue = params[0].data.show[index];
                var res = params[0].name;
                var name = params[0]["3"];
                res += '<br/>' + name + ' : ' + showValue;
                res = "<div style='font-size:12px;word-break:break-all;word-wrap:break-word;white-space:normal'>"+res+"</div>"
                return res;
            }
        },
        noDataLoadingOption: {
                       text: '暂无数据',
                       textStyle:{
                            color:'#ffffff',
                            fontSize:12,
                            fontFamily : '微软雅黑'
                        },
                        effect: 'bubble',
                        effectOption: {
                             backgroundColor:'#242730',
                            effect: {
                                n: 0
                            }
                        }
                    },
        polar : [
           {
               indicator : [],
               radius : 100,
               splitNumber : 3,
               splitArea : {
                   show : true,
                   areaStyle : {
                       color: ['red','yellow','green']
                   }
               },
               name:{
                    textStyle:{
                        color:"#ffffff"
                    }
               }
            }
        ],
        calculable : false,
        series : [
            {
                type: 'radar',
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data : [
                    {
                        value : [],
                        name : 'demo',
                        id : [],
                        show : []
                    }
                ]
            }
        ]
}
Other comments [其他信息]

回答

6

我用的是webpack 1.14和1.13.1版本的

6

+1 同问

2

我的也一样,2m多,能不能通过html标签引入min.js(只有200多k),然后在webpack中配置?

5

@keyiis 可以这么引入的,我现在就这么做的

4

我也这么做了:),原来8m现在减少了2m,继续优化

8

@keyiis 我在webpack.config.js中配置 externals echarts,然后在html中通过CDN的形式引入 min.js 但是发现并没有实质性的影响,请问你现在是怎么优化的?

0

@RifeWang 我是这样配置的,因为通过CDN引入的是挂在window对象下

externals: {
    "echarts": "window.echarts"
}
3

@keyiis 在js中如何引用echarts 我打包后的就有30M,大部分使用echarts

2

@ZiSeFeng 我是在html中引入echarts,并没有打包进webpack <script src="public/echarts/echarts.simple.min.js"></script>

5

这个问题还没有解决么?

8

要么打包进common或者在外部直接引入,压缩且开启gzip后大概是200多k,要么按照官网的写法,打包到页面的js中去,这样的话每个页面都有一份echart代码,压缩且开启gzip大概是50k左右。大家自己权衡吧,目前为止还没发现更好的解决方案。

1

我是项目中直接import echarts from 'echarts' ; 在html的script里面引用了echarts.min.js ; package.json里面 externals: { 'echarts': 'echarts' } 这样打包出来的结果是不包含echart的几十kb的js文件。


如果是像楼主那种 import个别组件的那种,我没有实验

5

是否在webpack 生产环境配置 devtool: 'cheap-module-source-map' ?

6

echarts 可以在线定制要构建的内容,可以勾选需要使用的功能,可以大幅度减少包的大小。 https://echarts.baidu.com/builder.html