lazy-store-loader

用于vue动态注册store模块的自定义块loader

问题背景

接手公司旧项目，大量模块用了store存储数据，导致store庞大且不能动态加载chunk文件，首屏加载了全部store代码。于是想通过vuex的注册模块方法实现动态注册，但是要手动写import，还要借助mixin，步骤繁琐。

1. store所在代码chunk庞大，不能进一步分割和动态加载。
2. 实现动态加载需要手动import并实现相关代码。

解决方案

借助vue-loader 自定义块，编译时生成相关代码。

快速使用

npm install --save-dev lazy-store-loader

// webpack.config.js
{
  module: {
    rules: [
      {
        resourceQuery: /blockType=foo/,
        loader: 'lazy-store-loader'
      }
    ]
  }
}

<!--Component.vue-->
<template>
</template>

<store path="xxx" url="@/store/module/xxx"/>

<script>
</script>
<style>
</style>

v2

以上是v1.0.3的使用方式，v2以后采用代码静态分析，获取mapState,mapActions,mapMutations等store引用，获取使用到的模块，根据loader参数提供的映射文件获取路径实现动态加载。