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 看看有沒有跑起來 (完)  最近寫東西愈來愈水了。。。