Best of Webpack — 2021
- 1
- 2
Bits and Pieces·5y
5 Methods to Reduce JavaScript Bundle Size
5 techniques to reduce the JavaScript bundle size to avoid any performance bottlenecks. Code splitting with Webpack allows you to separate your code into bundles and load them on-demand. Tree shaking is a technique used to eliminate dead codes, and Webpack provides several plugins to implement it. Using Alternative Libraries and Removing Duplicates helps to address performance issues easily.
- 3
JavaScript in Plain English·5y
Create a React App from Scratch in 2021
Become a better coder by learning what create-react-app is doing under the hood. The “React” equivalent of building your car engine from scratch. Create a React App from Scratch in 2021 in this article. The article is written by Meg Shulmister and published on February 20, 2015.
- 4
Intro to React Server Side Rendering
How to build a React SSR app without any tooling or framework. We will use React, webpack, and Express to build an app that works as follows: Browser sends HTTP request to server to load a page. Server receives request and turns React JSX into HTML markup. Browser renders the HTML, downloads the client-side JavaScript bundle, and “hydrates” the HTML.
- 5
Smashing Magazine·5y
Getting Started With Webpack — Smashing Magazine
Webpack is a highly extensible and configurable static module bundler for JavaScript applications. With its extensible nature, you can plug in external loaders and plugins to achieve your end goal. Let’s take a deep dive into what webpack is and how to use it in your development workflow.
- 6
Hashnode·5y
10 React Tips to Optimize Performance and make you a Pro.
10 React Tips to Optimize Performance and make you a pro. Avoid using Class Components. Increase Chunks. Use Dynamic Imports/ Code-Splitting. React State should be treated as immutable, never mutate this.state directly, calling setState() later may replace all the mutations made earlier.
- 7
- 8
20+ JavaScript Utilities to Boost Your Productivity As a Developer
In software development, utilities are software tools that add functionality to your code or improve the performance of your application. In this article, we'll go through a fantastic selection of tools that will help you be more productive as a software developer. The list includes Webpack, Cypress, Electron, DayJs, and NestJs.
- 9
- 10
Why Frontend Developers Need to be Webpack Experts
Just knowing how Webpack works won’t be enough to get maximum from it. You can easily enable its Hot Module Replacement feature to improve the development process. Tree-shaking can help you avoid dead or unwanted code from bundling. Splitting code on demand is the most straightforward and most used approach with Webpack.
- 11
SNIPCART·5y
JavaScript Bundlers: In-Depth Guide
A bundler is a development tool that combines many JavaScript code files into a single one that is production-ready loadable in the browser. A JavaScript bundler can be used when your project becomes too large for a single file or when you're working with libraries that have multiple dependencies. We'll look at the five most popular module bundlers in the Javascript ecosystem and explore how they work.
- 12
Next.js·5y
Next.js 10.2
Next.js 10.2 features faster build times, better startup times, and more. Webfont Optimization: Improved performance by inlining font CSS. More Flexible Redirects and Rewrites: Match any header, cookie, or query string. Improved Tree Shaking: CommonJS modules can be tree shaken to automatically remove unused code.
- 13
Why You Should Not Use Webpack
Webpack is one of the most popular bundlers around today. Tons of production apps and frameworks, such as Next.js, use it for bundling and building. However, times have changed since Webpack’s inception, and now it is not the best tool for lots of cases.
- 14
10 React Tips to Optimize Performance and make you a Pro.
10 React Tips to Optimize Performance and make you a pro. Avoid using Class Components. Increase Chunks. Use Dynamic Imports/ Code-Splitting. React State should be treated as immutable, never mutate this.state directly, calling setState() later may replace all the mutations made earlier.
