{"id":19168267,"url":"https://github.com/masx200/masx200-github-io","last_synced_at":"2025-05-07T14:41:14.510Z","repository":{"id":37105030,"uuid":"181018770","full_name":"masx200/masx200-github-io","owner":"masx200","description":"masx200的github 使用babel-standalone代替本地node模块 使用 bundler代替webpcak成功  首页 圆周率计算多线程 花密网页版 包含 vue-router和react-router的单页面应用测试.","archived":false,"fork":false,"pushed_at":"2025-04-04T17:59:19.000Z","size":16706,"stargazers_count":2,"open_issues_count":6,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-16T00:11:33.643Z","etag":null,"topics":["react","react-hooks","vue","webpack"],"latest_commit_sha":null,"homepage":"https://masx200-github-io-masx200.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masx200.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-12T13:57:47.000Z","updated_at":"2025-03-26T16:42:56.000Z","dependencies_parsed_at":"2024-11-09T09:42:18.594Z","dependency_job_id":"4073c4b0-b8b8-4653-8498-88d61f0caadc","html_url":"https://github.com/masx200/masx200-github-io","commit_stats":null,"previous_names":[],"tags_count":94,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masx200%2Fmasx200-github-io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masx200%2Fmasx200-github-io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masx200%2Fmasx200-github-io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masx200%2Fmasx200-github-io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masx200","download_url":"https://codeload.github.com/masx200/masx200-github-io/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252897338,"owners_count":21821426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-hooks","vue","webpack"],"created_at":"2024-11-09T09:42:00.944Z","updated_at":"2025-05-07T14:41:14.483Z","avatar_url":"https://github.com/masx200.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# masx200.github.io\n\nmasx200 的 github 网页\n\nhttps://github.com/masx200/masx200-github-io\n\n\u003chr\u003e\n\n# 网站升级到 cdn 加速服务器\n\nhttps://cdn.jsdelivr.net/gh/masx200/masx200.github.io/\n\n# 防止单页面应用首页白屏的方法,先显示 loading 图标,然后使用异步加载 react 或者 vue\n\n```javascript\ndocument.getElementById(\"root\").innerHTML = `\u003cdiv\u003e\n\u003ch1\u003eloading\u003c/h1\u003e\n\u003cspan class=\"mui-spinner mui-spinner-custom\"\u003e\n\n\u003c/span\u003e\u003c/div\u003e`;\n```\n\n# 使用 webpack-react-vue-spa-awesome-config 重构网页\n\n基于 webpack4.x, 同时支持 react 和 vue 的单页面应用 通用的 webpack\n配置文件,提供开箱即用支持\n\n您无需学习和配置许多构建工具。即时重新加载可帮助您专注于开发。在部署时，您的捆绑包会自动优化\n\nhttps://github.com/masx200/webpack-react-vue-spa-awesome-config\n\n# 基于 react hooks 编写的在线 markdown 阅读器 组件\n\nhttps://github.com/masx200/masx200.github.io/blob/master/src/markdown-react/index.js\n\nhttps://github.com/masx200/masx200.github.io/blob/master/src/home-react-webpack-react-vue-spa-awesome-config.js\n\n# 适合于 javascript/html/css/vue/reqct 编程的 vscode 的优秀扩展推荐和 vscode 的推荐设置\n\nhttps://github.com/masx200/excellent-vscode-extensions-for-javascript\n\n\u003chr\u003e\n\n\u003chr\u003e\n\n# 圆周率计算多线程,使用 BigInteger.js 和浏览器原生的 BigInt 之后速度得到巨大提升!\n\n优化了圆周率计算的多线程方式,开启一次 webworker 后,不再关闭它,每一个线程一个\nwebworker,也不重复创建过多 webweorker,并给按钮添加 mui 的 loading 效果,全局加上\nmui 的支持\n\n优化了圆周率的界面显示效果,使用 bootstrap4\n的折叠按钮效果,可以收起或展开某些特别占空间的组件\n\n需要浏览器 chrome68 以上,才原生支持 BigInt\n\n\u003cdiv\u003e\n\u003ch3\u003eBigInteger.js\u003c/h3\u003e\n        \u003cp\u003e\n          BigInteger.js是Javascript的任意长度整数库，允许对无限大小的整数进行算术运算，尽管存在内存和时间限制。\u003cbr /\u003e\n          更新（2018年12月2日）：BigInt被添加为JavaScript的本机功能。\u003cbr /\u003e\n          此库现在可用作polyfill：如果环境支持本机BigInt，则此库充当本机实现的瘦包装器。\u003cbr /\u003e\n          建议升级浏览器到chrome68以上,才可支持原生BigInt.\u003cbr /\u003e\n          \u003cb\u003e如果浏览器原生支持BigInt,则运行速度有巨大提升!\u003c/b\u003e\n        \u003c/p\u003e\n\n圆周率计算多线程\n\n\u003ch3\u003e计算运行速度排行:\u003c/h3\u003e\n        \u003cbr /\u003e1.原生BigInt最快,\u003cbr /\u003e2.BigInteger.js中速,\u003cbr /\u003e3.Decimal.js最慢。\n        \u003chr\u003e\n        \u003cbr /\u003e\n        \u003cdetails open\u003e\n        \u003csummary\u003e测试结果对比\u003c/summary\u003e\n\u003ch4\u003e 线程数为4 圆周率计算6000位测试结果\u003c/h4\u003e\n        \u003cbr /\u003e\n        firefox 66 测试 decimal.js 达到1倍速度\n        \u003cbr /\u003e\n        firefox 66 测试 BigInteger.js 达到2.163倍速度\n        \u003cbr /\u003e\n        chrome 75 测试 decimal.js 达到3.4375倍速度\n        \u003cbr /\u003e\n        chrome 75 测试 原生BigInt 达到74.038倍速度\n        \u003cp\u003e\u003c/p\u003e\n        \u003chr\u003e\n\u003ch4\u003e 线程数为4 圆周率计算10000位测试结果\u003c/h4\u003e\n        \u003cbr /\u003e\n        firefox 66 测试 decimal.js 达到1倍速度\n        \u003cbr /\u003e\n        firefox 66 测试 BigInteger.js 达到2.066倍速度\n        \u003cbr /\u003e\n        chrome 75 测试 decimal.js 达到3.688倍速度\n        \u003cbr /\u003e\n        chrome 75 测试 原生BigInt 达到100.773倍速度\n        \u003cp\u003e\u003c/p\u003e\n        \u003chr\u003e\n\u003ch4\u003e 线程数为8 圆周率计算10000位测试结果\u003c/h4\u003e\n\n\u003cbr /\u003e\n        firefox 66 测试 BigInteger.js 达到1倍速度\n        \u003cbr /\u003e\n        chrome 62 测试 BigInteger.js  达到6.688倍速度\n        \u003cbr /\u003e\n        chrome 74 测试 原生BigInt 达到49.710倍速度\n        \u003cp\u003e\u003c/p\u003e\n\u003chr\u003e\n\n\u003ch4\u003e 线程数为8 圆周率计算15000位测试结果\u003c/h4\u003e\n\u003cbr /\u003e\nchrome 62 测试 BigInteger.js  达到1倍速度\n\u003cbr /\u003e\nchrome 74 测试 原生BigInt 达到11.16倍速度\n\u003cp\u003e\u003c/p\u003e\n\u003c/details\u003e\n\u003chr\u003e\n\u003c/div\u003e\n\n\u003chr\u003e\n\n\u003chr\u003e\n\n# 网站结构介绍\n\n## 首页\n\n在图片中添加 loading=\"lazy\"实现图片懒加载\n\ncss 中使用@import 实现全部模块化\n\njs 中使用 import 实现全部模块化\n\n按钮弹出式 Bootstrap4 信息提示框测试\n\n## 包含 vue-router 和 react-router 的单页面应用测试\n\nhttps://masx200.github.io/my-vue-router-project/\n\nhttps://masx200.github.io/my-react-router-test/\n\n\u003chr\u003e\n\n## react-router 的单页面应用\n\n按需异步动态加载组件方法\n\n```javascript\nconst { Link, Switch, BrowserRouter, Route, Redirect } = ReactRouterDOM;\nconst { Suspense, lazy } = React;\nconst home = lazy(() =\u003e import(\"./module-home\"));\nconst rssreader = lazy(() =\u003e import(\"./module-rssreader\"));\nconst about = lazy(() =\u003e import(\"./module-about\"));\n\n\u003cBrowserRouter\n    basename={window.location.pathname + \"#/\"}\n    forceRefresh={false}\n    keyLength={12}\n\u003e\n    \u003cSuspense fallback={\u003cdiv\u003eloading\u003c/div\u003e}\u003e\n        \u003cSwitch\u003e\n            \u003cRoute exact path=\"/\" component={home} /\u003e\n            \u003cRoute path=\"/rssreader\" component={rssreader} /\u003e\n            \u003cRoute path=\"/about\" component={about} /\u003e\n            \u003cRedirect from=\"*\" to=\"/\" /\u003e\n        \u003c/Switch\u003e\n    \u003c/Suspense\u003e\n\u003c/BrowserRouter\u003e;\n```\n\n新版:按照路由组件分包加载,不使用本地 node 模块,大大减小了生成的文件大小,依赖包从\ncdn 加载\n\n新版:升级到 bootsrtap4 的导航栏和使用 fetch 的 rss\n阅读器演示的消息成功加载通知框效果\n\n旧版:把 react 相关所有代码都合并放在 index.jsx 文件中,除了 css 文件\n\n\u003chr\u003e\n\n新版:按照路由组件分包加载,不使用本地 node 模块,大大减小了生成的文件大小,依赖包从\ncdn 加载\n\n旧版:vue 把所有组件全部放在 index.jsx 中,除了 css 文件\n\n旧版:不使用.vue 格式的文件,把 vue 相关的所有 vue 组件都合并放在一个 index.js\n文件中,把 template 组件放在 template.html 文件中通过 ajax 加载,除了 css 文件\n\n\u003chr\u003e\n\n# 在 vscode 中安装 npm-scripts 插件即可轻松调试\n\n```\nnpm start\n\nnpm run build\n```\n\n或者\n\n```\nyarn start\n\nyarn build\n```\n\n## 生成静态文件\n\n```\nnpm run build \u0026\u0026 npm run edge \u0026\u0026 deno run -A ./ssg/ssg.ts\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasx200%2Fmasx200-github-io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasx200%2Fmasx200-github-io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasx200%2Fmasx200-github-io/lists"}