ly-ui-scaffold
react集成webpack4、antd、dva、react-loadable
文件目录
├── node_modules: 模块文件夹
| └── ...
├── dist: 打包生成目录
├── assets: 静态文件
├── src: 开发目录
| ├── app: 页面核心部分
| | ├── components: 页面共用组件
| | ├── config: 配置文件
| | ├── layout: 页面
| ├── routes: 页面路由
| | ├── menu.js 菜单文件
| | ├── route.js: 路由文件
| | ├── sidebar.js: 侧边栏文件
| ├── models: dav的通用model
| | ├── index.js: 导出所有的通用model
| | ├── login.js: 登录model
| | ├── sys.js: 系统model（错误处理等等）
| ├── plugins: 项目布局和项目共用组件
| | ├── container: 全局路由
| | ├── footer: 页脚
| | ├── header: 页头
| | ├── login: 登录页面
| | ├── navigationBar: 面包屑
| | ├── noticeIcon: 头部信息按钮
| | ├── TabController: 页面页签
| ├── redux: 使用dva模式使用redux
| | ├── dva.js: dva核心代码
| | ├── dynamic.js: 按需加载页面model
| ├── utils: 工具文件包
| | ├── api.js: 全局接口文件
| | ├── asyncComponent.js: 页面按需加载(react-loadable)
| | ├── AxiosUtil.js: axios封装和拦截
| | ├── Loading.js: 按需加载loading(处理了model的按需加载)
| | ├── util.js: 工具包文件
| └── index.js: 入口文件
├── index.ejs 模板文件
├── .babelrc babel配置文件
├── .eslintrc.json eslint
├── .gitignore git忽略文件
├── favicon.ico 页面title小图标
├── package.json 项目依赖 npm
├── README.MD 项目信息
├── postcss.config.js postcss配置文件
└── webpack.config.js webpack配置文件
脚手架优化
一.webpack优化
- 使用webpack4、babel7提高编译速度
- 使用 happypack 插件实现多线程执行任务
- 增加 dll 加快打包速度
- css按需加载（压缩css）
- 优化压缩js速度
- 按需加载lodash
- 可以使用BundleAnalyzerPlugin分析工具，分析项目可优化点
- webpack.config.js热更新，检测文件改动并自动重启项目
二.项目优化
- 按需加载(使用react-loadable实现)
- 集成antd并使用babel-plugin-import实现按需加载
- 使用dva模式管理数据，并支持按需加载页面对应的model
启动方法
- npm i ----------------------- 安装依赖
- npm start ------------------ 启动项目
- npm run build-win ------- win打包项目
- npm run build-mac ------- mac打包项目