Deprecated, please read vue-cli3.0

It is a vue template for multipage project powered by vue-cli.

请异步至vue-cli3.0的多页面章节

$ npm install -g vue-cli
$ vue init brandonxiang/mpa my-project
$ cd my-project
$ npm install
$ npm run build:dll
$ npm run dev
$ npm run build

• DllReferencePlugin
• ejs-compiled-loader
• --nomap command line for no productionSourceMap
• whitelist for package-building

npm run build:dll

DLL Package is placed in static folder. If you want to pack more repos into DLL Package,

Please place your own ejs template into ejs folder.

• head header in html
• loading globally loading plugins
• rem suitable in rem unit

npm run build --nomap

In the config/index.js, you can filter those packages which you want to build based on a whiteList.

blackList: ['Hello', 'eCommand', 'Pingan'],

Or

you can filtr them using a commandline.

npm run build Hello eCommand Pingan

MIT

我记得去年很多人看了我《用Webpack构建Vue》一篇文章,但是因为webpack和vue升级速度很快,那文章很快就过时了。学习vue最好的教材莫过于vue-cli直接生成的单页面项目。可惜的是它不过是一个单页面的项目,在我们的实际生产环境中,往往都是较为分散的页面,为的是保证项目的解耦。

饿了么的 PWA 升级实践正讲到饿了么的超大型SPA如何解耦成MPA的过程。

github源码在此,记得点星: https://github.com/brandonxiang/mpa

• 多个入口
• DllReferencePlugin 利用控制多页面常用包
• CommonsChunkPlugin 控制多页面的公用包
• ejs模版语言控制html
• --nomap 命令控制sourceMap
• whitelist 控制专门打包

$ npm install -g vue-cli
$ vue init brandonxiang/mpa my-project
$ cd my-project
$ npm install
$ npm run build:dll
$ npm run dev
$ npm run build

第一点,JS包的大小直接影响着首屏弱网情况下的页面加载情况,DllReferencePlugin和CommonsChunkPlugin就有效拆分公用包的大小,每个包控制在100k左右。

dll打包在config中的dll.js中控制,把公共全量使用的npm包写入配置文件:

module.exports = {
 path: 'static/dll',
 libs: [
 'vue/dist/vue.esm.js',
 'vue-router',
 ],
}

在npm run dev和npm run build前使用npm run build:dll去打固定dll包,提高打包调试的效率。

第二点,模版语言在html-webpack-plugin中的使用,将一些关键代码内联拼接在html中。例如:

• header中的meta(包括dns预解析等)
• loading全局插件
• 计算rem的单位
• 关键全局样式

第三点,黑名单的打包

在config/index.js配置黑名单,有些项目将不会打包。

blackList: ['Hello', 'eCommand', 'Pingan'],

同时,我们也可以专门指定打几个包。

npm run build Hello eCommand Pingan

参考【技术研究】vue项目的性能优化之路

Webpack的版本升级速度真的是非常快,快得无法想象。有幸经历1到2和2到3的升级,体验了一步一步的性能优化。同期无论是 rollup 还是 parcel 的出现,他们的优缺点很好地反哺了webpack的优化点。parcel的出现又一次让人反思"wbepack的配置是不是太过于繁琐",但是parcel由不够成熟,而且tree-shaking和scope-hoisting的缺席。所以,现在前端工程化中,能投入生产的还是webpack,我也相信webpack4会变得更好。

多页面脚手架正是采用全新的webpack3构建,里面包含它的"内容不变hash值不变"的特性,欢迎大家指点评论。

转载,请表明出处。总目录前段收集器

微信公众号