Introduction:
Installing same dependencies into different modules of a project constitutes additional work. When you have more dependencies in your project, it often leads to an increased bundle size. This is because each dependency brings its own set of files, code, and sometimes additional dependencies. Efforts are often made to optimize bundle size, as smaller bundles can lead to faster load times and better user experiences, especially in scenarios where users may have limited bandwidth or slower network connections. Reusing or reutilizing dependencies from one module in another could offer a more efficient approach to the problem. This means organizing and using common dependencies wisely.
Prerequisites:
- Liferay 7.4
- Github
- React.js
- Typescript
Let’s start by creating two modules in React TypeScript with Liferay:
- common_module
- Test_module
For a comprehensive guide on setting up TypeScript and React with Liferay, check out this informative blog: Typescript and React with Liferay.
Implementation of the common_module:
To demonstrate the concept, we’ll use the Material-UI library. Start by installing it
npm install @mui/material
- Create a git repository for your common_module.
- Now commit your code.
- Update the package.json file with the repository link. Write down the below code package.json file:
// package.json
"repository": {
"type": "git",
"url": "https://github.com/b3ingarshad/common_module.git"
},
Implementation of the common_module:
- Add two dependencies in package.json file:
"common_module": "https://github.com/b3ingarshad/common_module.git",
"react-scripts": "5.0.1"
- Install all packages by running the below command:
npm i --force
- Use material UI component.
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
function App() {
return (
<Stack spacing={2} direction="row">
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</Stack>
);
}
export default App;
- Deploy test_module.
npm run deploy
- Now drag and drop test_module and publish.
- Whenever you install any dependencies in the common_module module, follow the below steps:
- In the common_module_web module’s terminal.
1. Commit the code to the respective repository.
- In the test_module’s terminal.
1. npm update common_module_web
2. npm run deploy
Services Our ReactJS Development Team offers:
- Explore our ReactJS Enterprise Application Development services. Build scalable, efficient apps with ReactJS. Master state management, component-based architecture, and UI design. Accelerate your development process and create robust enterprise solutions. Start building better web applications today!
- Unlock the potential of ReactJS with our Custom Application Development service. Tailored solutions for your unique needs. Expertise in building responsive, high-performance web apps. Let’s bring your vision to life with ReactJS.
- Discover the power of ReactJS Application Architecture. Streamline development with scalable, efficient structures. Master component-based design and state management for robust, flexible apps. Elevate your coding game with ReactJS architecture!
- Ensure smooth operation with the ReactJS Maintenance and Support service. Keep your app running at peak performance with timely updates and fixes. Our dedicated team is here to provide reliable assistance whenever you need it!
