uniapp小程序分包异步化实践----echarts分包实战

最近一次修改代码，超了2M上传不上去了，改动了一些代码终于可以上传了。不过主包还是接近2M，是时候该解决这个问题了。

上网找了一下几篇文章，最终决定使用分包异步化方法。 这里我用的是uniapp开发的小程序。

首先，根目录下面新建分包目录packageEcharts,里面新增index.vue（空文件)和echarts.js，在pages.json加入分包路径。

    {
        "root": "packageEcharts",
        "name": "packageEcharts",
        "pages": [{
            "path": "index",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        }]
    }

在vue.config.js加入配置，打包后的分包内才能包含echarts.js

configureWebpack: {
    plugins: [
        new CopyWebpackPlugin([{
            from: path.join(__dirname, 'packageEcharts'),
                to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV ===
                    'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'packageEcharts')
        }])
    ]
}

在uni-ec-canvas组件的中，修改如下：

// 注释掉原来的引入方式
// import * as echarts from "./echarts";
	
let echarts = null

增加一个函数，参数cb是函数，是加载echarts.js成功后执行的,

    getEchartsAsync(cb) {
        if (echarts) {
            cb(echarts)
        } else {
            __non_webpack_require__ && __non_webpack_require__('../../packageEcharts/echarts.js', res => {
                // ...
                console.log('加载成功', res)
                echarts = res
                cb(echarts)
            }, ({mod, errMsg}) => {
                // ...
            })
        }
    }

然后修改init，ready,onReady函数

    this.getEchartsAsync(() => {
         ...
    })

在应用uni-ec-canvas页面中，修改如下

let echarts = null
....
....
this.$refs['uni-ec-canvas'].getEchartsAsync((echartjs) => {
    echarts = echartjs
    this.$refs['uni-ec-canvas'].init(this.initChart)
})

改完运行，没报错，OK。打包后再看一下，主包体积明显减小。

打包前截图

打包后截图

总结......完。