{"id":15193918,"url":"https://github.com/brandonxiang/mpa","last_synced_at":"2025-10-02T08:31:25.593Z","repository":{"id":87906955,"uuid":"90443527","full_name":"brandonxiang/mpa","owner":"brandonxiang","description":"A vue template for multipage project","archived":true,"fork":false,"pushed_at":"2018-10-15T14:14:11.000Z","size":141,"stargazers_count":27,"open_issues_count":3,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-24T20:03:58.233Z","etag":null,"topics":["dll","ejs-templates","multi-page","rems","vue","vue-cli","webpack3","whitelist"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandonxiang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-05-06T06:52:45.000Z","updated_at":"2023-01-28T16:56:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"d7d74bb2-4b72-4fc3-8434-6b6464f2b568","html_url":"https://github.com/brandonxiang/mpa","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fmpa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fmpa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fmpa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandonxiang%2Fmpa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandonxiang","download_url":"https://codeload.github.com/brandonxiang/mpa/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219875662,"owners_count":16554697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dll","ejs-templates","multi-page","rems","vue","vue-cli","webpack3","whitelist"],"created_at":"2024-09-27T22:08:02.164Z","updated_at":"2025-10-02T08:31:20.144Z","avatar_url":"https://github.com/brandonxiang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mpa\n\n**Deprecated, please read [vue-cli3.0](https://cli.vuejs.org/config/#pages)**\n\nIt is a vue template for multipage project powered by [vue-cli](https://github.com/vuejs/vue-cli).\n\n\u003e 请异步至vue-cli3.0的[多页面章节](https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E6%9E%84%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%A4%9A%E9%A1%B5%E5%BA%94%E7%94%A8)\n\n\n## Usage\n\n``` bash\n$ npm install -g vue-cli\n$ vue init brandonxiang/mpa my-project\n$ cd my-project\n$ npm install\n$ npm run build:dll\n$ npm run dev\n$ npm run build\n```\n\n## Features\n\n- DllReferencePlugin\n- [ejs-compiled-loader](https://github.com/bazilio91/ejs-compiled-loader)\n- `--nomap` command line for no productionSourceMap\n- whitelist for package-building\n\n## Usage\n\n#### DLL Package build\n\n```bash\nnpm run build:dll\n```\n\u003e DLL Package is placed in `static` folder. If you want to pack more repos into DLL Package, \n\n#### Template EJS\n\nPlease place your own ejs template into `ejs` folder.\n\n- [head](template/src/ejs/head.ejs) header in html\n- [loading](template/src/ejs/loading.ejs) globally loading plugins  \n- [rem](template/src/ejs/rem.ejs) suitable in rem unit\n\n\n#### No Production SourceMap\n\n```bash\nnpm run build --nomap\n```\n\n#### BlackList for Package-building\n\nIn the `config/index.js`, you can filter those packages which you want to build based on a whiteList.\n\n```javascript\nblackList: ['Hello', 'eCommand', 'Pingan'],\n```\n\nOr\n\nyou can filtr them using a commandline.\n\n```\nnpm run build Hello eCommand Pingan\n```\n\n## Licence\n\n[MIT](LICENSE)\n\n## 中文文档\n\n我记得去年很多人看了我《用Webpack构建Vue》一篇文章，但是因为webpack和vue升级速度很快，那文章很快就过时了。学习vue最好的教材莫过于[vue-cli](https://github.com/vuejs/vue-cli)直接生成的单页面项目。可惜的是它不过是一个单页面的项目，在我们的实际生产环境中，往往都是较为分散的页面，为的是保证项目的解耦。\n\n\u003e [饿了么的 PWA 升级实践](https://huangxuan.me/2017/07/12/upgrading-eleme-to-pwa/)正讲到饿了么的超大型SPA如何解耦成MPA的过程。\n\n## 多页面脚手架\n\n\u003e github源码在此，记得点星: \nhttps://github.com/brandonxiang/mpa\n\n#### 特点\n\n- 多个入口\n- DllReferencePlugin 利用控制多页面常用包\n- CommonsChunkPlugin 控制多页面的公用包\n- ejs模版语言控制html\n- --nomap 命令控制sourceMap\n- whitelist 控制专门打包\n\n#### 使用方法\n\n```bash\n$ npm install -g vue-cli\n$ vue init brandonxiang/mpa my-project\n$ cd my-project\n$ npm install\n$ npm run build:dll\n$ npm run dev\n$ npm run build\n```\n\n#### 用法\n\n第一点，JS包的大小直接影响着首屏弱网情况下的页面加载情况，DllReferencePlugin和CommonsChunkPlugin就有效拆分公用包的大小，每个包控制在100k左右。\n\ndll打包在`config`中的`dll.js`中控制，把公共全量使用的npm包写入配置文件：\n\n```\nmodule.exports = {\n  path: 'static/dll',\n  libs: [\n    'vue/dist/vue.esm.js',\n    'vue-router',\n  ],\n}\n```\n\n在`npm run dev`和`npm run build`前使用`npm run build:dll`去打固定dll包，提高打包调试的效率。\n\n第二点，模版语言在html-webpack-plugin中的使用，将一些关键代码内联拼接在html中。例如：\n\n- header中的meta（包括dns预解析等）\n- loading全局插件\n- 计算rem的单位\n- 关键全局样式\n\n第三点，黑名单的打包\n\n在`config/index.js`配置黑名单，有些项目将不会打包。\n\n```javascript\nblackList: ['Hello', 'eCommand', 'Pingan'],\n```\n\n同时，我们也可以专门指定打几个包。\n\n```\nnpm run build Hello eCommand Pingan\n```\n\n## 性能优化\n\n参考[【技术研究】vue项目的性能优化之路](https://www.jianshu.com/p/40b04701c571)\n\n## Webpack3 的升级\n\nWebpack的版本升级速度真的是非常快，快得无法想象。有幸经历1到2和2到3的升级，体验了一步一步的性能优化。同期无论是 [rollup]() 还是 [parcel]() 的出现，他们的优缺点很好地反哺了webpack的优化点。parcel的出现又一次让人反思“wbepack的配置是不是太过于繁琐”，但是parcel由不够成熟，而且tree-shaking和scope-hoisting的缺席。所以，现在前端工程化中，能投入生产的还是webpack，我也相信webpack4会变得更好。\n\n[多页面脚手架](https://github.com/brandonxiang/mpa)正是采用全新的webpack3构建，里面包含它的“内容不变hash值不变”的特性，欢迎大家指点评论。\n\n转载，请表明出处。[总目录前段收集器](http://www.jianshu.com/p/c1e3b96c1293)\n\n![微信公众号](http://upload-images.jianshu.io/upload_images/685800-b90086f21952919c.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\n\n\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonxiang%2Fmpa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandonxiang%2Fmpa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandonxiang%2Fmpa/lists"}