mpvue 分包方案

mpvue官方分包

使用mpvue-entry外掛

mpvue官方分包

主要修改：

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 中）

不相容的地方：

mpvue-loader@1.1.2-rc.4+ 依賴 webpack-mpvue-asset-plugin@0.1.1+ 做依賴資源引用

之前寫在 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"
    }]
  }
}
複製程式碼

專案目錄：

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

總結

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

如果微信官方更新了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;
    }, []);
    ..........
}

複製程式碼

subPackage 的根目錄下的所有子目錄，都需要在當前根目錄配置分包。
最後，呼叫尤大大回來拯救mpvue。

mpvue 分包方案

mpvue 分包方案

mpvue官方分包

使用mpvue-entry庫分包

總結

相關文章