mpvue 分包方案

mpvue 分包方案

1. mpvue官方分包
2. 使用mpvue-entry插件

---

mpvue官方分包

地址： 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. mpvue-loader@1.1.2-rc.4+ 依賴 webpack-mpvue-asset-plugin@0.1.1+ 作依賴資源引用
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。