ec-echarts 分包预加载

ec-echarts 分包预加载

方案一：将echart 组件放在某个分包中，其他页面进行公共引用（可行）。

uniapp 在编译为小程序代码的时候，会把除了static文件夹，其余均被编译为小程序的可用代码，然而官网ec-canvas库却是一个完整的wxcommpent（微信小程序组件），那么只能放在static文件夹里面，但是static文件夹又会打包到微信小程序的主包里面，所以要把ec-echart放到分包当中，我们需要把问题拆分为：

问题1：手动转ec-echart为vue文件，

经过试验发现在import包的时候，最终还是会编译到主包的vendor.js里面，所以这个方案行不通。

问题2：让uniapp跳过编译原封不动的编译过去。

可以通过copy-webpack-plugin依赖包并配合uniapp的vue.config.js自定义静态资源目录成功完成改方案的验证。完整的实现步骤：

1. 创建分包，并引入ec-canvas（wxcommpent组件），创建空index.vue页面（作为包的主要目录）
   
2. 在pages.json配置ec-canvas分包信息

{
  "root": "pages/eccanvas",
  "pages": [
    {
      "path": "index", // ec-canvas 空路径
      "style": {
          // #ifndef MP-ALIPAY || MP-TOUTIAO
          "navigationStyle": "custom",
          // #endif
          "navigationBarTitleText": "一房一万·ec-canvas空路径"
      }
    }
  ]
},

3. 在pages.json配置ec-canvas分包预加载代码，preloadRule与subPackages同级

"preloadRule": {
  // 当前路径将进行预下载分包
  "pages/houseproperty/plateDetails": {
    // 在指定网络下预下载，可选值为：all: 不限网络、wifi: 仅wifi下预下载
    "network": "all", 
    // 进入页面后预下载分包的 root 或 name。__APP__ 表示主包。
    "packages": [
        "pages/eccanvas"
    ]
  },
]

4. 在pages.json配置ec-canvas跨分包自定义组件引用以及componentPlaceholder 设置 占位组件

{
  "path" : "transactionData", // 成交数据 5.8.4
  "style": {
    // #ifndef MP-ALIPAY || MP-TOUTIAO
    "navigationStyle": "custom",
    // #endif
    "navigationBarTitleText": "一房一万·成交数据",
    "usingComponents": {
        // #ifdef MP-WEIXIN
        "ec-canvas": "/pages/eccanvas/ec-canvas/ec-canvas"
        // #endif
    },
    "componentPlaceholder": { // 组件占位符，用于指定组件的占位位置
        "ec-canvas": "view"
    }
  }
}

5. 安装 copy-webpack-plugin 依赖（用5.0.0的版本-不用5.0.0的话，会报错），用于把wxcomponents完整的给编译到分包下。
   npm install -save copy-webpack-plugin@5.0.0
6. 在项目根目录创建vue.config.js文件，配置需要原封不动跳过编译的文件

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([{
        // pages/eccanvas/ec-canvas 为需要跳过uniapp编译成小程序代码
        from: path.join(__dirname, 'pages/eccanvas/ec-canvas'),
        to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev',
          'mp-weixin', 'pages/eccanvas/ec-canvas')
      }])
    ]
  }
}

1. 注意：分包ec-canvas存在编译缓存，删除unpackage文件，重新编译。