webpack + Vue多页面应用脚手架

使用方式

``
npm i -g better-cli
bcli init helloworld
cd helloworld
npm i
npm run dev
``
webpackTpl模版项目地址

开发规范

项目结构按照xxx.html对应src/xxx文件夹规范开发。一个html页面文件对应src下同名的目录

已有功能

- [x] 自动分析加载不同页面所需要的第三方模块，防止重复打包
- [x] 支持postcss处理浏览器兼容性问题
- [x] 支持sass less 等css预处理器
- [x] 开发环境热重载
- [x] 生产环境css提取为单独文件 静态资源文件压缩
- [x] babel使用transform-runtime代替polyfill，按需加载使用到的babel特性大大减少打包文件体积
- [x] 预置常用babel插件
- [x] vue-router使用懒加载，减少初次加载的文件体积
- [x] 根据生产环境和开发环境使用不同版本的vue源文件
- [x] 执行 npm run analyze 生成可视化打包文件
- [x] webpack关键配置处皆附有注释，可根据实际需要修改配置

后续考虑支持功能

- [ ] 支持React多页面应用
- [ ] 加入Vue服务端渲染
- [ ] 引入Dll加快构建速度
- [ ] 升级到webpack4

内置babel插件

- @babel/preset-env 将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言
- @babel/plugin-transform-runtime 使用transform-runtime代替babel-polyfill目的是按需引入你需要babel转换的特性，而不是将整个polyfill引入，并且不会像polyfill一样重写原本的API。缺点是某些不支持的API，例如Object.assign Array.includes, 需要引入单独插件
- @babel/plugin-transform-object-assign 为不包含Object.assign的浏览器注册该API
- @babel/plugin-proposal-json-strings
- @babel/plugin-proposal-decorators 给class提供装饰器功能
- @babel/plugin-proposal-export-namespace-from 提供export * as ns from 'mod' 语法
- @babel/plugin-syntax-dynamic-import vue-router懒加载需要用到的babel插件

文章总结

webpack+Vue多页面应用打包优化实战

优化前后对比

$3

!优化前
可以看出，只有app-page页面用到了vue-router但是out-page页面也加载了vendor.js中的vue-router

$3

!优化后
可以看出vue-router被单独打包到vendor-app.js文件并且只在app-page页面v中加载, axios被单独打包到vendor-out.js中并且只在out-page页面加载