mpvue 分包方案

摘要： 地址： mpvue-docs/change-log 主要修改： build/webpack.base.conf.js 增加拷貝專案新增'/.json$/'檔案，包括app.json和pages下頁面 json檔案。拷貝圖片目錄到dist下。 bu...

地址： mpvue-docs/change-log

主要修改：

• build/webpack.base.conf.js

  增加拷貝專案新增'/.json$/'檔案，包括app.json和pages下頁面 json檔案。拷貝圖片目錄到dist下。

• build/webpack.prod.conf.js, build/webpack.dev.conf.js

  css和js檔案從之前分別打包到單獨的css和js目錄，改為pages單檔案目錄下。vendor.js和manifest.js則一起打包到common目錄下。

  vendor是通過提取公共模組外掛來提取的程式碼塊（webpack本身帶的模組化程式碼部分），而manifest則是在vendor的基礎上，再抽取出要經常變動的部分，比如關於非同步載入js模組部分的內容。

• config/index.js

  開發環境和生產環境打包生成的路徑從原來的static下改為單檔案目錄下。

• package.json

  升級： "mpvue-loader": "^1.1.1-rc.4" "webpack-mpvue-asset-plugin": "^0.1.1"

  新增： "relative": "^3.0.2"

• src/main.js

  刪除config配置

• src/app,.json

  將原 src/main.js 中的 config 遷移到 app.json 檔案中（頁面 JS 中的配置遷移到 main.json 中）

不相容的地方：

1. [email protected]+ 依賴 [email protected]+ 做依賴資源引用
2. 之前寫在 main.js 中的 config 資訊，需要在 main.js 同級目錄下新建 main.json 檔案，使用 webapck-copy-plugin copy 到 build 目錄下

對於需要在“原來pages每個同級目錄下新建一個main.json 檔案”，這種方式為了分包，卻不惜增加大量單個配置檔案（如果專案做大了），main.js和main.json的出現不利於專案的維護。

專案目錄：

打包生成目錄：

使用mpvue-entry庫分包

"集中式頁面配置，自動生成各頁面的入口檔案，優化目錄結構，支援新增頁面熱更新"

原理：

以 src/main.js 為模板，使用配置檔案中的 path 及 config 屬性分別替換 vue 檔案匯入路徑 及 匯出資訊

地址： mpvue-enrty

模版： F-loat/mpvue-quickstart

主要修改（基於以上官方分包配置）：

• package.json

  升級： "mpvue-loader": "1.1.2"，"webpack-mpvue-asset-plugin": "0.1.1"

  新增："mpvue-entry": "1.5.3"

• build/webpack.base.conf.js

// entry更改
const MpvueEntry = require('mpvue-entry')

module.exports = {
// src/pages.js檔案是頁面路由route，頁面路徑path和小程式頁面設定config的集合
entry: MpvueEntry.getEntry('src/pages.js'),
...
plugins: [
new MpvueEntry(),
...
]
}
複製程式碼

• 路由

  • src/router/home.js（模組路由的入口）

  // 首頁
  const home = [
  {
  // 路由
  route: 'pages/index/index',
  // 路徑
  path: 'pages/index',
  // 配置
  config: {
  navigationBarTitleText: 'CPASS',
  navigationBarBackgroundColor: '#7E73FF',
  navigationBarTextStyle: '#FFFFFF',
  enablePullDownRefresh: true
  },
  // 設定分包
  // subPackage: true,
  // root: 'pages/index'
  }
  ]
  module.exports = home
  複製程式碼

  • src/router/index.js（暴露所有路由的入口）

  // 路由入口檔案
  const home = require('./home');
  const router = [
  ...home
  ]
  module.exports = router
  複製程式碼

  • src/pages.js（引入路由）

  // 該檔案是在node環境下執行，需要使用CommonJS模組規範
  // 將路由模組化，方便維護
  const routes = require('./router');
  module.exports = routes
  複製程式碼

• src/app.json（小程式全域性配置）

{
"pages": [],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"position": "bottom",
"color": "#AEAEBD",
"selectedColor": "#8C68FE",
"backgroundColor": "#FFFFFF",
"borderStyle": "#E1E1E6",
"list": [{
"text": "發現",
"pagePath": "pages/index/index",
"iconPath": "/static/images/icon-found-nor.png",
"selectedIconPath": "/static/images/icon-found-pre.png"
}, {
"text": "我的",
"pagePath": "pages/my/my",
"iconPath": "/static/images/icon-my-nor.png",
"selectedIconPath": "/static/images/icon-my-pre.png"
}]
}
}
複製程式碼

專案目錄：

生成目錄與官方分包方案大體一致。

總結

1. 使用mpvue-entry分包簡化了專案目錄結構，也讓後期維護更加方便，但是目前還是存在一些熱更新的問題需要優化。

2. 如果微信官方更新了app.json裡面的欄位配置，需要這個外掛手動去更新版本。比如微信基礎庫v2.3.0 (2018.09.10)更新了【獨立分包】和【分包預載入】分別對應的"independent"和"preloadRule"屬性，目前並無入口可以配置。

   // lib/compiler.js
   /**
    * @param {Object} paths
    * @param {String} paths.app
    * @param {Object} pages
    * @param {Array} pages.formated
    * @param {String} template
    */
   function genConfig(paths, pages, home) {
   require.cache[paths.app] = null;
   const app = require(paths.app);
   
   app.pages = pages.formated
   .filter(page => !page.subPackage)
   .map(page => page.path);
   
   app.subPackages = pages.formated
   .filter(page => page.subPackage)
   .reduce((result, page) => {
   const root = page.root || page.path.replace(/\/.*$/, '');
   const subPath = page.path.replace(`${root}/`, '');
   const subIndex = result.findIndex(subPackage => subPackage.root === root);
   if (subIndex === -1) {
   result.push({
   root,
   pages: [subPath],
   });
   } else {
   result[subIndex].pages.push(subPath);
   }
   return result;
   }, []);
   ..........
   }
   
   複製程式碼

3. subPackage 的根目錄下的所有子目錄，都需要在當前根目錄配置分包。

4. 最後，呼叫尤大大回來拯救mpvue。