muyunyun / reactspa Goto Github PK
View Code? Open in Web Editor NEWcombination of react teconology stack
Home Page: http://muyunyun.cn/reactSPA
License: MIT License
combination of react teconology stack
Home Page: http://muyunyun.cn/reactSPA
License: MIT License
我看了一下这个页面的分页机制,实际上是进行内存分页,并不是使用异步加载分页机制。这里是有开关控制吗
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
What is the expected behavior?
配置到吐血
我在选择某个模块,比如#/album,重新刷新页面。页面还是#/album的页面,但是左侧的tab并没有选中
试用 airbnb 代码规范。
// .eslintrc
"extends": "airbnb",
// package.json
"eslint": "^5.5.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
能还配置优化或是分块打包,目前打包出来文件太大了
IE11控制台都会报错“ 对象不支持“startsWith”属性或方法”,页面无法显示
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
牧云云大神太厉害了,约不约?
来看下面这一组 webpack 的配置项,
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true, // 开启 css 模块化
importLoaders: 2,
},
},
{
loader: require.resolve('postcss-loader'),
options: {...},
},
{
loader: require.resolve('less-loader'),
options: {...},
},
],
},
它们执行顺序是 less-loader
、postcss-loader
、css-loader
、style-loader
。我们来理一下各 module 的作用:
style
标签中实践代码如下所示
import 'styles' from 'index.less'
<Layout className={styles.containAll}>...</Layout>
.containAll {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
.github {...}
.author {...}
.white {...}
.menu {...}
.switch {...}
}
}
编译后结果为
<div class="_2xsOSdvdJbkVjqgjHOE58l">...</div>
<style type='text/css'>
._2xsOSdvdJbkVjqgjHOE58l {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
</style>
通过 _2xsOSdvdJbkVjqgjHOE58l
锁定作用域
但是这种方式有一个缺陷,因为 JavaScript 是不识别连接符的,所以如果类名必须写成驼峰式的。如下这样写它就会编译报错:
import 'styles' from 'index.less'
<Layout className={styles.contain-all}>...</Layout>
为了更大的普适性,我们来看下面一种方案:
它的本质是一个高阶组件,目前文档上已经说明不再维护(因为影响了运行时的性能)。
目前在 less 中使用有 bug,参见 https://github.com/gajus/babel-plugin-react-css-modules/issues/165,正在跟进。
可以参考 压缩打包优化实践,使用这种方案,也做到了当前模块只展示相应引入的 css(本质也是 style)
我第一次打开输入错误的帐密点击按钮提示我“XXXX”,再次刷新页面会自动又提示我“XXXXX”
棒棒哒
开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例:浏览器中输入 http://localhost:3000/analyze.html
可以看到如下效果:
使用 MiniCssExtractPlugin 插件分离 JavaScript 和 Css 文件:
823.94 KB build / static / js / main.496a38b7.js
8.2 KB build / static / css / main.css
code-spliting 官方给出三种方案,分别如下:
方案一的缺点如下:
所以方案一通常会结合方案二、方案三一起使用,方案一的配置大致如下:
entry: [require.resolve('./polyfills'), paths.appIndexJs],
// 也可以写成
entry: {
polyfill: require.resolve('./polyfills'),
IndexJs: paths.appIndexJs,
},
方案二:使用插件 SplitChunkPlugin
optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
maxAsyncRequests: 5,
priority: 10,
enforce: true,
},
},
},
},
打包效果如下:
723.96 KB build/static/js/vendor.a9289a29.chunk.js // node-modules 模块
98.72 KB build/static/js/main.7bcaca24.js
8.2 KB build/static/css/1.css
此时将 node-modules 里的包打包成了一个大块头,这样对加载仍然是不友好的。解决方案为:将核心的框架单独打包出来,剩余模块异步加载,比如可以使用 bundle-loader)。
optimization: {
runtimeChunk: false,
splitChunks: {
cacheGroups: {
vendor1: { // 主要模块
chunks: 'all',
test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/,
name: 'vendor1',
maxAsyncRequests: 5,
priority: 10,
enforce: true,
},
vendor2: { // 次要模块
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
name: 'vendor2',
maxAsyncRequests: 5,
priority: 9,
enforce: true,
reuseExistingChunk: true,
},
},
},
}
打包效果如下:
588.06 KB build/static/js/vendor2.d63694f4.chunk.js
133.17 KB build/static/js/vendor1.0d40234c.chunk.js
98.72 KB build/static/js/main.b7a98d03.js
8.2 KB build/static/css/2.css
可以看到此时 node_modules 包已经被拆分成了核心模块和非核心模块。
import()
首先使用官网安利的 react-loadable 这个包,它的**是根据路由
(代替模块)进行代码的动态分割,异步加载所需要的组件,从而极大地提高页面加载速率。
在路由界面进行如下配置:
const Loading = () => <div>Loading...</div>
const Home = Loadable({
loader: () => import('../pages/home'),
loading: Loading,
})
// 类似这样使用路由
<Router>
<Route path="/home" component={Home} />
<Route path="/follow" component={Follow} />
<Route path="/tools" component={Tools} />
<Route path="/music" component={Music} />
<Route path="/todo" component={Todo} />
<Route path="/album" component={Album} />
<Route path="/editor" component={Editor} />
<Route path="/todoList" component={TodoList} />
<Route path="/searchEngine" component={Search} />
<Route path="/waterfall" component={Waterfall} /
</Router>
我们来看代码分割后的结果:
这里测试结果是去掉方案二的配置后进行的,实验对比后,使用方案三的方式稍优于方案二、三共同使用的方式。
235.89 KB build/static/js/IndexJs.57ee1596.js
225.94 KB build/static/js/15.c09a5919.chunk.js
138.18 KB build/static/js/17.30c26142.chunk.js
82.71 KB build/static/js/1.667779a6.chunk.js
57.55 KB build/static/js/16.f8fa2302.chunk.js
16.46 KB build/static/js/2.e7b77a5d.chunk.js
14.79 KB build/static/js/18.cad1f84d.chunk.js
12.51 KB build/static/js/0.73df11a7.chunk.js
11.22 KB build/static/js/13.19501c58.chunk.js
8.34 KB build/static/js/5.33fd1c35.chunk.js
7 KB build/static/js/8.9f1d0a47.chunk.js
5.86 KB build/static/js/12.24f0a7ec.chunk.js
5.06 KB build/static/css/18.css
4.97 KB build/static/js/polyfill.1c61a660.js
3.58 KB build/static/js/7.dd4976e3.chunk.js
3.53 KB build/static/js/14.16f6b811.chunk.js
3.42 KB build/static/css/17.css
2.98 KB build/static/js/10.464a61e4.chunk.js
2.02 KB build/static/js/11.3728d5a9.chunk.js
1.45 KB build/static/js/6.92fbac58.chunk.js
1.13 KB build/static/js/9.59160a3a.chunk.js
有多少个路由,react-loadable 库就自动帮我们多拆分了多少个包文件。可以想象在越大的项目中,这种动态引人库的好处越明显。
而且可以很清晰的看到,当我们在 /home 下,只有 home 组件是被加载的,其他组件并没有被加载!
那么 react-loadable 的神秘之力是如何实现的呢,它本质上是个运用了属性代理的高阶函数,通过在高阶函数里配合 import()
加进各种状态,从而达到异步加载模块的效果。
其作用是能自定义一些区分生成环境与开发环境的名字,用法如下:
生产环境:
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
ENABLE_DEVTOOLS: false,
}),
生产环境配置中的 process.env.NODE_ENV: "'production'" 必须要填上,根据这个命令, 有些不必要的 warn 命令不会出现在生产环境。(不过在实践中,发现 mode 为 production 时,webpack 应该自动加上了这个配置)
开发环境:
new DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify({ 'development' }) }
ENABLE_DEVTOOLS: true,
})
比如只有在开发环境下才使用 redux 分析工具,可以作如下区分:
{ENABLE_DEVTOOLS ? <DevTools /> : ''}
在IE11中打开报错,请问这个项目是不支持IE11的吗
作者你好!我刚开始接触React,我看了下你的项目中路由是在routers.js中去配置的,但是里面只有首页与登录页的配置,那么点击侧边栏的时候让页面去跳转是如何实现的呢?这些是在哪里配置的呢?
我在webpack.config.dev.js上面设置的代理好像没什么用
devServer: {
proxy: {
'/api': {
target: 'http://localhost:4000/application',
secure: false
}
}
}
加了上面一段还是没生效
Module not found: Can't resolve 'history/createBrowserHistory' in '/opt/huahai/test/reactSPA-master/src/common'
你这个右侧的调试工具是什么插件,本地跑起来,但是不知道怎么关,新手
你好啊大神 ,我 在 拜读 你的 https://github.com/MuYunyun/reactSPA 项目, 看到用 了
@connect
语法, 我项目里也是 yarn eject 之后 , 也用了这个语法 ,但是 我 npm run build 时就报错了,
然后 我 npm i react-scripts --save-dev 重新装回 react-scripts 这个库后, package.json里的 build 脚本 改成 "build": "react-scripts build",
这下 就 看到
是 @connect 的错误, 你的项目 是 怎么配置的啊, 我看你的项目 可以 build 成功啊
前排挤一挤,拜拜牧大神!
前排挤一挤,拜拜牧大神!
前排挤一挤,拜拜牧大神!
前排挤一挤,拜拜牧大神!
前排挤一挤,拜拜牧大神!
前排挤一挤,拜拜牧大神!
使用 React Profiler,Introducing the React Profiler,有了 React Profiler 后,优化性能会变得直观,比如各个组件渲染的时间,也可以观察组件是否进行了无用的渲染。
使用 PureComponent
使用不可变数据,在 react 使用 immutable.js 的优势
重构与良好设计,性能优化实践之 —— 使用 why-did-you-update
babel 插件的运用,plugin-transform-react-constant-elements, 它的原理是提升一些不会变的 React 元素的作用域。从而避免重复多次实例化 ReactElement。用于生产环境,开发环境会造成调试困扰。
npm start运行正常,npm build无效
请楼主帮忙解决
你好,想请问一下node.js可以在github pages上可以运行吗?还是你把项目打包生成静态页面?
执行npm start 报错,什么原因呢?
F:\app\reactSPA-master\scripts\start.js:23
const {
^
SyntaxError: Unexpected token {
这个demo每次登陆后,按F5后,页面会重新跳转至登陆页面,这个在真实项目中是有问题的。
What is the current behavior?
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
What is the expected behavior?
npm start后 响应速度太慢了,半天才能刷出页面,有什么地方可以optimizing一下的?
在“”工具模块“”的日期中,如果我单独选择年份的话(例如1999),刚选择完毕,弹出框消失,但是输入框并没有显示我选择的结果。如果是用“<<”选择年份然后在上面选择日期的话,是OK的。
打开音乐列表页面。会有警告提示“Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of TableCell
.”
in Tooltip (created by TableCell)
in TableCell (created by TableRow)
in tr (created by TableRow)
in TableRow (created by Table)
in tbody (created by Table)
in table (created by Table)
in div (created by Table)
in div (created by Table)
in div (created by Table)
in div (created by Table)
in Table (created by Table)
in div (created by Spin)
in AnimateChild (created by Animate)
in div (created by Animate)
in Animate (created by Spin)
in Spin (created by Table)
in div (created by Table)
in Table (created by Table)
in div (created by Table)
in Table (created by Music)
in div (created by Music)
in div (created by Music)
in div (created by Music)
in Music (created by Connect(Music))
in Connect(Music) (created by Route)
in Route (created by Contents)
in div (created by Basic)
in Basic (created by Adapter)
in Adapter (created by Contents)
in Contents (created by Container)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by Container)
in div (created by BasicLayout)
in BasicLayout (created by Adapter)
in Adapter (created by Container)
in Container (created by Route)
in Route
in Switch
in div
in Router (created by HashRouter)
in HashRouter
in Provider
当前痛点
当下急切寻找一个平台级的 mock 方案,在各个系统间使用无差别利于推广。调研开始。
大搜车推出的 mock 方案。
优势:前端团队间合作较为容易;支持部署到公司内网;支持 swager;
缺点:需掌握 mock.js 的语法,有一定上手成本;还是得依赖后端定好相应的数据格式;
有赞前端推出的 mock 方案。目前感觉这个好玩的点比较多,但是并没有开源。
难点:
控制台提示:C:\workspace\reactApp\reactSPA-master\scripts\start.js:23
const {
^
由于antd使用公网的iconfont,导致内网环境无法使用iconfont,有什么解决办法可以使用本地的iconfont吗?
在切换主题的时候会有的menu先变色 有的会后变色 这个怎么解决呢 ?
如果我用java开发 后端怎么和你的前端对接啊
点击刷新我所在的路由页面,左侧菜单栏高亮回到首页,不是当前所在页面高亮
这个项目用的脚手架,然后eject了?还是webpack全是自己配的
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.