mpvue支持小程序的分包加載

目錄

• [clone mpvue-quickstart 模板](#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 看看有沒有跑起來 (完)

最近寫東西越來越水了。。。