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。