lycalendar

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优化

1. 使用webpack4、babel7提高编译速度
2. 使用 happypack 插件实现多线程执行任务
3. 增加 dll 加快打包速度
4. css按需加载（压缩css）
5. 优化压缩js速度
6. 按需加载lodash
7. 可以使用BundleAnalyzerPlugin分析工具，分析项目可优化点
8. webpack.config.js热更新，检测文件改动并自动重启项目

二.项目优化

1. 按需加载(使用react-loadable实现)
2. 集成antd并使用babel-plugin-import实现按需加载
3. 使用dva模式管理数据，并支持按需加载页面对应的model

启动方法

• npm i ----------------------- 安装依赖
• npm start ------------------ 启动项目
• npm run build-win ------- win打包项目
• npm run build-mac ------- mac打包项目