vue中使用echarts按需引入解决打包体积过大问题 |
您所在的位置：网站首页 › 文档瘦身后还是过大 › vue中使用echarts按需引入解决打包体积过大问题 |
|
官网中给出的按需引入： import * as echarts from 'echarts'; // 按需引入 import * as echarts from 'echarts/lib/echarts';在 5.0.1 中，引入了新的按需引入接口 import * as echarts from 'echarts/core'; import { BarChart } from 'echarts/charts'; import { GridComponent } from 'echarts/components'; // 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer import { CanvasRenderer } from 'echarts/renderers'; echarts.use([BarChart, GridComponent, CanvasRenderer]);以上两种引入方式，在项目中使用后，打包后文件体积依然很大。 改用按需引入： 1、先创建一个 echarts.js 文件，我项目中用到的是饼图（pie） const echarts = require('echarts/lib/echarts'); require('echarts/lib/component/title'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/legend'); require('echarts/lib/component/grid'); require('echarts/lib/chart/pie'); export default echarts2、用到的组件中引入文件 import echarts from "./ echarts.js";再打包的时候发现体积比之前小了 1M 多。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |