mpvue——引入echarts打包vendor过大

有一个项目需要引入图表，当时有两种选择一种是mpvue-echarts，一种是F2，而我经过踩坑之后依然决然的选择了mpvue-echarts，简单快捷容易上手，主要之前用过比较熟悉。

import * as echarts from 'echarts/dist/echarts.min'

引入后再打包少了2M左右但是还是大啊,查看了webpack后发现,因为是开发环境,所以没进行UglifyJs压缩,所以解决的方法来了,引入UglifyJs插件

修改build目录下 的webpack.dev.conf.js配置文件

var UglifyJsPlugin = require('uglifyjs-webpack-plugin') new UglifyJsPlugin({ sourceMap: true })

 我是觉得还是大了好多，小程序独立包又限制2M,好尴尬吧，所以我们要尽量去控制属性的吧

 辣么 定制化官方echarts来了

勾选需要的组件压缩echarts.js然后去下载

<template>
  <!-- 历史价格走势 -->
  <div class="history-price">
    <view class="module-title">历史价格走势</view>
    <view class="history-content">
      <mpvue-echarts :echarts="echarts" :onInit="initChart" canvasId="historyChart"/>
    </view>
  </div>
</template>

<script>
// 实例引用
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
import { mapState } from 'vuex'

let chart = null

export default {
  data() {
    return {
      xAxisData: [],
      seriesData: [],
      echarts
    }
  },

  methods: {
    handleHistoryPriceData() {
      this.houseTrendData.forEach(item => {
        this.xAxisData.push(this.formatCategories(item.usemonth))
        this.seriesData.push(item.projectavgprice_anli)
      })
    },

    formatCategories(data) {
      const dataArr = data ? data.split('-') : []
      const [year, month] = dataArr
      const formatStr = year.substr(2, 4) + '-' + month
      return formatStr
    },

    initChart(canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      // ECharts 配置项
      var option = {
        backgroundColor: '#fff',
        color: ['#37A2DA'],
        tooltip: {
          show: false
        },
        legend: {
          data: ['价格'],
          top: 20
        },
        grid: {
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            rotate: 45,
            interval: 0
          },
          data: this.xAxisData
        },
        yAxis: {
          x: 'center',
          type: 'value'
        },
        series: [
          {
            name: '价格',
            type: 'line',
            smooth: true,
            label: {
              show: true,
              offset: [10, 20],
              fontSize: 10
            },
            data: this.seriesData
          }
        ]
      }

      chart.setOption(option)

      // 返回 chart 后可以自动绑定触摸操作
      return chart
    }
  },

  mounted() {
    this.handleHistoryPriceData()
  },

  computed: {
    ...mapState('qrySuccess', {
      houseTrendData: state => state.houseTrendData
    })
  },

  components: {
    mpvueEcharts
  }
}
</script>
           

 实例下载肯定是最大包的，我这只需要折线，所以我需要引用echarts时替换掉就阔以了,

# 替换 echarts.min.js 文件

需要修改 node_modules 中 echarts -> dist -> echarts.min.js,

用项目里 第三方库定制化的 echarts.min.js替换原有

 最重要的一点差点忘了，

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue: 'mpvue',
      '@': resolve('src'),
      echarts: 'echarts/dist/echarts.min',
      flyio: 'flyio/dist/npm/wx',
      wx: resolve('src/utils/wx')
    },
    symlinks: false,
    aliasFields: ['mpvue', 'weapp', 'browser'],
    mainFields: ['browser', 'module', 'main']
  },
           

引入就有指向了，也阔以直接替换echarts.js 就省事了 不用处理了