Skip to content

tumars/boilerplate-webpack-react-es6-cssModule

Repository files navigation

本项目主要作为 react 项目开发的启动模板。使用 webpack v3、react v16、react-router v4,相较旧模板有较大的变化。

webpack 的具体使用及优化可参考我的博文 webpack 使用总结

主要依赖及工具

https://github.com/facebook/react https://reacttraining.com/react-router https://github.com/reactjs/redux

https://github.com/webpack/webpack https://github.com/eslint/eslint https://github.com/babel/babel https://github.com/postcss/postcss

功能

主要功能

  • Hot Module Replacement 热加载
  • ESLint 检测
  • less、autoprefixer
  • 业务组件使用 cssModule,通用组件使用 BEM 命名法
  • 小于 8k 图片转为 base64
  • svg 图标
  • 文件压缩、添加 MD5
  • ES6+, Fetch
  • 使用 Redux DevTools (安装浏览器插件)

示例动图:

demo

组件

本项目用到的纯组件主要如下:

这些组件主要展示思路与方法,功能较基础,仅供参考。实际开发生产时请根据业务需求二次开发。

开始使用

本项目使用yarn作为包管理,也可替换为npm。两者的差异请参阅从 npm 客户端迁移。无论使用哪个都建议将安装源替换为淘宝镜像

安装

git clone https://github.com/tumars/boilerplate-webpack-react-es6-cssModule
cd boilerplate-webpack-react-es6-cssModule
yarn install

开发

yarn start

访问 http://localhost:3000/ 查看页面。

iterm1

mock 接口数据

打开新命令行窗口,执行:

yarn run mock

接口将会在本地 3003 端口启动。本项目的接口数据通过 node http 服务建立,配置文件在 /mock 文件夹内。

iterm2

打包

Windows 用户使用:

yarn run build-win

Mac 用户使用:

yarn run build-mac

文件将会在./dist文件夹内生成。

可以使用anywhere工具建立本地服务查看页面:

yarn global add anywhere 或 npm i -g anywhere
cd ./dist
anywhere

页面会自动打开。

目录文件结构

structure

其他技术选择

REM 与 VW、VH

之前使用 rem 布局,后来看了再聊移动端页面的适配,决定使用 vw、vh 布局,配合 postcss-px-to-viewportviewport-units-buggyfill 能通过大部分机型的测试。

经测试发现 viewport-units-buggyfill 在处理 base64 背景图片的 vw vh 时会导致图片出错,请注意。

当然使用 rem 布局还是最安全的,提供三个方案:

  1. 参考本项目 v2 版本使用 js 控制 html 的 font-size 。
  2. 使用 postcss-pxtorem
  3. 使用淘宝的 lib-flexible,这个是最推荐的。

async 函数

本项目中的获取接口数据处的异步处理使用的是 async 函数,相比 Promise 直观、方便了许多。

Decorator

本项目的一些组件使用了 Decorator(修饰器)的写法,例如 module/mo-carousel。以及 css module 也是以 Decorator 的方式使用。

性能优化

Reselect

Reselect 库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。

使用 Reselect 相当一个缓存,使容器组件传递的 props 输入值不变时输出值不变,以减少显示组件的重复渲染。

本项目的 layout/data-list-tabs 文件内使用了 Reselect。

更多 Reselect 的访问跟介绍请访问:https://github.com/reactjs/reselect

Immutable

Immutable 是指数据不可变。使用 Immutable 在每次操作修改对象时都会生成一个新对象,而不修改原对象。这对 react 有这么两点意义:

    1. 保证了 state 的不可被直接更改。
    1. 便于 shouldComponentUpdate 对比前后对象是否相同。

从而一定的程度上的保证安全性和提提高性能。

这是 Immutable.js 的文档页面:https://facebook.github.io/immutable-js/

其他优化

列表不要使用 index 作为 key

React Diff 算法中 React 会借助元素的 key 值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。 如果使用 index 来作为 key,当数据更新仅仅是数组重新排序或在其中间位置插入新元素,那么视图元素都将重新渲染。

不要在 componentWillMount 中调用 setState

在 componentWillMount 没有意义,所有的 state 初始化应当在 this.state 中定义,而第一次 render 后改变 state 应当在 componentDidMount 中执行。

而且该时间周期钩子在 react v17 版本中将会被移除,查看:https://reactjs.org/docs/react-component.html#mounting

注意动画渲染优化,使用 chrome 调试性能

页面的图像渲染经过如下五个步骤

  • script (js 计算)
  • style (样式计算)
  • layout (布局)
  • paint (绘制)
  • composite (合成)

具体的讲解与优化请查看 chrome 开发者文档的说明: https://developers.google.com/web/fundamentals/performance/rendering/?hl=zh-cn

主要版本变化

v3

  • 主要使用 webpack v3 + react v16 + react-router v4
  • 更改文件结构,组件更新
  • Promise 改为 async await
  • rem 布局改为 vw、vh,使用 postcss-px-to-viewport 配置
  • 动画组件依赖更新至 react-transition-group

主要使用 webpack v2 + react v15 + react-router v4

主要使用 webpack v1 + react v13 + react-router v2

联系我

如有问题请提 issue,或通过以下方式联系到我:

欢迎指教交流 🙆‍

About

a boilerplate for Webpack-React-ES6-CssModule project

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published