mpvue支持小程序的分包加载

目录

• clone mpvue-quickstart 模板
• 分包体验
• 现有项目的分包改造

这个功能能够说是让咱们这些用 mpvue 的等的很焦灼，眼看着项目的大小一每天地逼近 2M，mpvue 还不能很好地支持分包加载，这可咋整？好消息是最近 mpvue 要支持分包加载了，不过目前在 develop 分支下面。下面咱们一步步来看看怎么初始化一个支持分包加载的 mpvue 项目，以及不平滑的完成对老项目的改造。

clone mpvue-quickstart 模板

初始化一个 mpvue 项目是基于 mpvue-quickstart 项目模板的，使用的是下面的命令:

vue init mpvue/mpvue-quickstart my-project

可是这样是基于 quickstart 的 master 分支建立的项目，因此咱们能够把这个模板 clone 下来，而后切换到 develop 分支上，再基于本地的模板建立一个新的 mpvue 项目，如下是一通（猛如虎的）操做:

git clone https://github.com/mpvue/mpvue-quickstart.git
cd mpvue-quickstart
git branch develop #切换到开发分支

这时，在项目的 template/src 目录下会有一个 app.json 文件，代表你如今在开发分支上。

分包体验

首先用本地分 mpvue 模板初始化一个项目, 参考 vue-cli 使用本地模板的 文档:

vue init ../mpvue-quickstart demo # 替换模板路径为相对于你项目的相对路径

能够看到咱们将模板替换成了本地的模板，后面的操做就熟悉了。

初始化好项目以后，咱们来写一个分包加载的 demo。进入项目目录，咱们能够看到一个 json 文件，就是上面提到的 app.json。而后参考小程序文档，加入 subpackages 的相关配置：

{
  "pages": [
    "pages/index/main",
    "pages/logs/main"  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "subPackages": [
    {
      "root": "pages/pA",
      "pages": [
        "a/main"
      ]
    }
  ]
}

而后在 pages / 下，新建 pA/a 目录，在目录下再新建两个文件，main.js 和 index.vue，最终目录结构以下图所示:

后面的操做就跟以前的 mpvue 开发过程一致了，这里再也不赘述。直接贴上相关代码:

index/index.vue 主包

...

<a href="../pA/a/main"> 分包 </a> 跳转到分包
...

当点击上面的连接时，手机上会首先出现正在加载模块，而后跳转到 build 出来的 pages/pA/a/main 页面, 表示分包生效。或者能够在开发者工具 -> 详情 -> 本地代码也可查看主包和分包的大小状况。

** 注意 ** 支持分包是依赖于 mpvue-loader v1.1(目前是 1.1.4) 以上版原本实现的，以后在写页面时，不能再在 main.js 中采用 export 语法来写页面配置，须要在页面目录下写一个单独的 main.json 文件。一个页面的目录结构以下：

index.vue
main.js
main.json

若是但愿像以前同样在 main.js 中写配置，能够本身写一个 loader，将 export default 代码块提取出来，生成一个 json 文件。我尝试写了一个，仅供参考：https://www.cnblogs.com/imgss/p/9813868.html

现有项目的分包改造

更新于 2019-1-5

随着 mpvue 的完善，将原来不分包的项目切换成分包彷佛没有那么难了，可分为如下几步：

1. 使用 vue-cli 新建一个 mpvue 项目,（去掉eslint，防止没必要要的麻烦，若是须要，迁移成功后再加回来），执行 npm install命令（检查依赖，mpvue的版本为1.0.18）
2. 删掉新项目中的 src 和 static 目录
3. 将老项目中的 src 和 static 目录 copy 过来
4. 提取以前写在 main.js 中的 json 配置到单独的文件中，可以使用 loader 完成这一工做，见这篇文章
5. 完善 app.json 中的 pages 数组（由于以前的版本是自动将 vue 文件添加到 pages 的）
6. 加入 appid, 开发者工具中勾选 es6 转 es5 选项。
7. npm run dev 观察小程序是否正常运行
8. 若是一切正常，在 app.json 中设置 subpackages 字段，便可将原来不分包的小程序变为分包

======= 如下为以前的内容 ======

对于想将现有项目改形成支持分包的朋友，可能要麻烦一点，还要踩一点坑。下面我就详细说一下咱们的改造过程以及遇到的坑。下面内容主要参考 issue 672

• 将项目备份一份，包括依赖

  没有人但愿分包改造不成功，还把原来能跑的搞的不能跑了，因此，先将整个项目复制一份，而后在副本里搞

• 升级依赖

  cnpm i mpvue-loader@1.1.0-rc.1 --save
  
  cnpm i webpack-mpvue-asset-plugin@0.1.0-rc.1 --save

• 修改 webpack 配置

  在这一步，会修改 build 目录下的 webpack.base.conf.js,webpack.prod.conf.js,webpack.dev.conf.js 三个文件，具体细节参考 这里

• 修改 config 目录下的配置

  打开 config/index.js, 将 assetsSubDirectory 字段的值由 static 改为''

  ...
  assetsSubDirectory: ''// 去掉 static
  ...

• 将 app.json 的配置从 main.js 中移出来，命名为 main.json

  以前 mpvue 将 app.json 写到 main.js 的 export 中，如今把它拿到同级目录下，新建一个 main.json 文件（注意是 main.json，不是 app.json），按小程序文档的格式粘贴进去。


最后 npm run dev 看看有没有跑起来 (完)  最近写东西愈来愈水了。。。