自配置webpack + react 全家桶 实现简书网站的部分前端
--运行npm install
安装项目依赖包
- 开发环境运行:
在config/webpack.config.js 中设置(默认为true
)shouldUseDllPlugin
。shouldUseDllPlugin = true
时需要先运行npm run dll
打包依赖文件。 然后运行npm start
启动本地服务器运行项目。shouldUseDllPlugin = false
时直接运行npm start
运行项目。 - 打包后运行:
运行npm run build
打包文件,然后运行npm run http
启动本地服务器,在浏览器中输入控制台打印的地址即可运行。 - 实现了PWA 的 service-worker 部分,访问一次即可关闭自启动的服务器。
- redux, react-redux: 统一管理数据,以及在react中更方便使用redux
- immutable, immutable-redux: 使用不可突变数据,配合 react中的 PureComponent使组件性能提高,以及合并reducer使用。
- styled-component: 实现 css-in-js
- redux-thunk: redux中间件,实现dispatch一个函数,完成异步操作。
- react-loadable: 实现组件的lazy-load,同时定义加载动画。
- axios: 请求方法的封装库。
- react-router-dom:管理路由。
- babel-loader:不处理第三方库以及开启缓存
- 使用了DllPlugin:对第三方库进行了提前打包,减少每次对第三方库的打包时间。
- 对未用到的组件进行了分离。
- 使用PureComponent优化了组件性能。
- 使用了不可突变数据管理数据。