Light

jinjietan / react-webpack Goto Github PK

View Code? Open in Web Editor NEW

239.0 13.0 51.0 5.7 MB

React移动端项目，手动配置的脚手架，完美性能优化的极致追求

JavaScript 80.80% CSS 17.04% HTML 2.16%

react-webpack's Introduction

React-webpack ------基于antd-mobile等库的一套移动端完美脚手架配置

超越京东的优化程度首屏的load事件触发不到0.4s

包管理器使用yarn,下载后 yarn init ,然后 yarn 即可获取所有依赖

初次下载所有的包，建议使用cnpm 下载，全局安装cnpm后， cnpm i 即可百分百顺利安装所有包

npm start 即可启动项目

项目是移动端react antd-mobile better-scorll material-design redux react-redux 的结合
React的最新配置实现需求：

识别JSX文件
识别箭头函数、识别async函数
支持Ant-Design-mobile的按需加载
支持babel-polyfill按需加载、better-scroll
支持预请求，服务端渲染的懒加载
支持预渲染，SSR，服务端渲染首屏，首屏load事件仅需要0.4秒不到的时间
tree shaking 摇树优化删除掉无用代码
PWA功能，热刷新，安装后立即接管浏览器离线后仍让可以访问网站还可以在手机上添加网站到桌面使用
CSS模块化，不怕命名冲突
小图片的base64处理
文件后缀省掉jsx js json等
实现React懒加载，按需加载，代码分割并且支持服务端渲染
支持less sass stylus等预处理
code spliting 优化首屏加载时间不让一个文件体积过大
提取公共代码，打包成一个chunk
每个chunk有对应的chunkhash,每个文件有对应的contenthash,方便浏览器区别缓存
图片压缩
CSS压缩
增加CSS前缀兼容各种浏览器
对于各种不同文件打包输出指定文件夹下
缓存babel的编译结果，加快编译速度
每个入口文件，对应一个chunk，打包出来后对应一个文件也是code spliting
删除HTML文件的注释等无用内容
每次编译删除旧的打包代码
将CSS文件单独抽取出来
让babel不仅缓存编译结果，还在第一次编译后开启多线程编译，极大加快构建速度
等等....

react-webpack's People

Contributors

Stargazers

Watchers

react-webpack's Issues

html-loader & html-webpack-plugin功能不是一致么

RT,

为啥有了html-webpack-plugin之后还要在babel里用html-loader呢？

依赖位置

"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"pubsub-js": "^1.7.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.4",
"react-lazy-load": "^3.0.13",
"react-lazyload": "^2.5.0",
"react-lazyload-fadein": "^1.1.0",
"react-loadable": "^5.5.0",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scroll": "^1.7.11",
"react-virtualized": "^9.21.1",
"react-virtualized-auto-sizer": "^1.0.2",
"react-window": "^1.8.5",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"axios": "^0.18.0"
},
这些不是应该放到dependencies里面吗？

一些webpack配置建议

1、正常webpack配置除了 dev 和 prod 两份外还有一份 webpack.base.js 做公共配置项，感觉作者可以考虑抽一下公共配置出来

2、一开始首页我看见是有写css module的然后开发发现并没有看了下更新日志和配置才发现关了，所以感觉又可以专门弄个 config文件夹专门放这些配置项

wow

come on~

请问您这个脚手架下面怎么访问public文件呢

感觉各方面都挺好的，就是想访问public文件夹一直不得其门而入。。。

热重载效果没有实现

拉下项目报了一些错

应该是Chromium无浏览器的包下不来，这个应该不影响，但是项目还是起不来。

建议dependency分类下

RT

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.