{"id":17242776,"url":"https://github.com/imcuttle/react-webpack-lazyloader","last_synced_at":"2025-04-14T03:25:33.789Z","repository":{"id":45112694,"uuid":"296025370","full_name":"imcuttle/react-webpack-lazyloader","owner":"imcuttle","description":"The webpack loader for react component","archived":false,"fork":false,"pushed_at":"2023-04-17T11:23:06.000Z","size":1684,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T02:34:04.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imcuttle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-09-16T12:26:31.000Z","updated_at":"2022-01-12T13:37:53.000Z","dependencies_parsed_at":"2024-10-21T15:58:09.532Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/react-webpack-lazyloader","commit_stats":{"total_commits":38,"total_committers":6,"mean_commits":6.333333333333333,"dds":0.5789473684210527,"last_synced_commit":"9c947c8a9e9ecb415102e58c2b44a2f70396bef2"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Freact-webpack-lazyloader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Freact-webpack-lazyloader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Freact-webpack-lazyloader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Freact-webpack-lazyloader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/react-webpack-lazyloader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248814642,"owners_count":21165798,"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":[],"created_at":"2024-10-15T06:14:02.176Z","updated_at":"2025-04-14T03:25:33.772Z","avatar_url":"https://github.com/imcuttle.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-webpack-lazyloader\n\n[![Build status](https://img.shields.io/travis/imcuttle/react-webpack-lazyloader/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/react-webpack-lazyloader)\n[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/react-webpack-lazyloader.svg?style=flat-square)](https://codecov.io/github/imcuttle/react-webpack-lazyloader?branch=master)\n[![NPM version](https://img.shields.io/npm/v/react-webpack-lazyloader.svg?style=flat-square)](https://www.npmjs.com/package/react-webpack-lazyloader)\n[![NPM Downloads](https://img.shields.io/npm/dm/react-webpack-lazyloader.svg?style=flat-square\u0026maxAge=43200)](https://www.npmjs.com/package/react-webpack-lazyloader)\n[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)\n[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)\n\n\u003e The webpack loader for fetch react component async\n\n用于异步按需加载 React Component, 支持 Dll 按需加载，推荐在 **微前端项目 或 大组件加载 或 服务端支持 H2** 的时候使用\n\n## Installation\n\n```bash\nnpm install react-webpack-lazyloader @loadable/babel-plugin -D\n# or use yarn\nyarn add react-webpack-lazyloader @loadable/babel-plugin --dev\n```\n\n## How it works?\n\nUse webpack pitch loader and inspired by style-loader.\n\n- Origin Button\n\n```jsx\nexport default () =\u003e \u003cbutton\u003e\u003c/button\u003e\n```\n\n- Transformed Button after `react-webpack-lazyloader`\n\n```jsx\nimport loadable from '@loadable/babel-plugin'\nconst Component = loadable(() =\u003e import('!!BUTTON_REQUEST'))\nconst Button = React.forward(function Button(props, ref) {\n  return \u003cComponent ref={ref} {...props} /\u003e\n})\nexport default Button\n```\n\n## Usage\n\n```js\n// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: [/\\.lazy\\.(tsx|jsx?)$/, /\\/pages\\/[^\\/]+?\\/index\\.tsx$/],\n        loader: 'react-webpack-lazyloader',\n        options: {\n          lazyType: 'React.lazy',\n          fallbackRequest: paths.resolveApp('src/page-loading.tsx'),\n          chunkName: 'react-lazy-[name]-[contenthash:8]'\n        }\n      }\n    ]\n  }\n}\n```\n\n### 正常使用\n\n```jsx\nimport Button from 'react-webpack-lazyloader!./button'\n\n// 按照正常逻辑使用\n;\u003cButton\u003ebutton\u003c/Button\u003e\n```\n\n### 结合 DllPlugin\n\n使用 DllPlugin，会预先把 chunk 一个个分离好，在 main.js 中则会按照 dll chunk 进行加载，比较**适合母子前端工程使用**\n\n例子请看：[examples](./examples)\n\n**注意：** Dll 模式下的组件更新，不会热替换，可能需要 IPC (Dll watch \u003c-\u003e Dev Server)，后续进行完善，或者对于需要频繁改动的依赖，不建议 chunk 至 DLL 中\n\n## Options\n\n### `lazyType`\n\n使用 [`@loadable/component`](https://github.com/gregberge/loadable-components) 还是 `React.lazy` 方式实现异步加载，其中 `@loadable/component` 支持 [SSR](./examples)\n\n- Type: `'loadable' | 'React.lazy'`\n- Default: `'loadable'`\n\n### `fallback`\n\n需要是可以正确注入的表达式字符串，如 `'\"加载中\"'` 而不能是 `'加载中'`\n\n可以是 `\u003cSpin/\u003e`\n\n- Type: `string`\n- Default: `'null'`\n\n### `fallbackRequest`\n\nSuspend 中 fallback 参数的引用 element，如 `/path/to/loading.js`，可以保证 `/path/to/loading.js` 被正确 loader 转换\n\n- `loading.js`\n\n```jsx\nimport * as React from 'react'\nexport default \u003cSpin /\u003e\n```\n\n- Type: `string`\n- Default: `'null'`\n\n### `jsx`\n\n是否用 JSX 语法，否则用 `React.createElement`\n\n- Type: `boolean`\n- Default: `false`\n\n### `chunkName`\n\nchunk name\n\n- Type: `string`\n- Default: `null`\n\n### `exposeNamedList`\n\n需要暴露的组件\n\n- Type: `string[]`\n- Default: `['default']`\n\n### `wrapExposeComponentRequest`\n\n- Type: `string`\n- Default: `null`\n\n## Contributing\n\n- Fork it!\n- Create your new branch:  \n  `git checkout -b feature-new` or `git checkout -b fix-which-bug`\n- Start your magic work now\n- Make sure npm test passes\n- Commit your changes:  \n  `git commit -am 'feat: some description (close #123)'` or `git commit -am 'fix: some description (fix #123)'`\n- Push to the branch: `git push`\n- Submit a pull request :)\n\n## Authors\n\nThis library is written and maintained by imcuttle, \u003ca href=\"mailto:yucong06@meituan.com\"\u003eyucong06@meituan.com\u003c/a\u003e.\n\n## License\n\nMIT - [imcuttle](https://github.com/imcuttle) 🐟\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Freact-webpack-lazyloader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Freact-webpack-lazyloader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Freact-webpack-lazyloader/lists"}