mpvue 分包方案

5,847 阅读1分钟

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。