prettier VS webpack

Compare prettier vs webpack and see what are their differences.

webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. (by webpack)
Our great sponsors
  • Nanos - Run Linux Software Faster and Safer than Linux with Unikernels
  • Scout APM - A developer's best friend. Try free for 14-days
  • SaaSHub - Software Alternatives and Reviews
prettier webpack
138 121
41,318 59,923
1.1% 0.4%
9.9 9.9
4 days ago 6 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

prettier

Posts with mentions or reviews of prettier. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-12-06.

webpack

Posts with mentions or reviews of webpack. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-12-08.
  • How to Create a Dark Mode Component in React
    4 projects | dev.to | 8 Dec 2021
    If you choose not to use CRA you should still be able to follow along with this tutorial. We will be writing pure CSS, but in order to copy the examples exactly you would need to have webpack setup with a CSS loader to support the import syntax for CSS files.
  • 25 Website Performance Metrics to Watch in 2022
    1 project | dev.to | 8 Dec 2021
    A valid element
  • A valid robots.txt file
  • A valid rel=cannonical attribute
  • There's plenty more audits that fall within the scope of this score. To read the full list, check out this article.

    7. Best Practices Score

    The Lighthouse Best Practices score tells you about the code health of your web page. As with all other scores, it also shows you opportunities to improve the health of your site.

    It's a weighted average, in which 0 is the lowest score and 100 the highest (better), and includes various technical audits such as:

    • Correct aspect ratio for images
    • Using HTTP/2 for all resources
    • Using HTTPS to serve the site
    • Not using deprecated browser APIs

    To read all audits included in this score, read this article by the Lighthouse team.

    8. PWA Score

    The Lighthouse PWA score tells you if your site is compatible with the requirements for a Progressive Web App. At a high level, that means it should be fast, reliable and installable.

    It's a weighted average, in which 0 is the lowest score and 100 the highest (better), and includes various technical audits such as:

    • Page load should be fast even on mobile networks
    • Use HTTPS to serve the website
    • Registers a service worker that controls page and start_url
    • The web app manifest meets the installability requirements

    You can find the rest of the audits for this score in this article.

    Page Load Metrics

    When you click a link, your web browser starts a multi-step process to load all synchronous resources required for this web page. The longer this process takes, the longer you must wait to interact with a website.

    Page load time process
    A simplified page load time process.

    How long this process takes is what the Page Load Time measures. It involves multiple steps, and can be broken into multiple parts such as DNS lookup time, SSL/TLS, download size and many more.

    Let's look into each one individually.

    9. Page Load Time

    Page load time measures the amount of time it takes for a complete web page to show up on your screen.

    It's measured from the point a user initiates it - such as clicking on a link or typing the website URL - to when the page has fully loaded in the browser.

    Page load time
    Various page load time measurements in Panelbear

    10. Domain Lookup Time

    The Domain Lookup Time is the time spent resolving the server address for a given domain.

    For example, when you type google.com your browser must first resolve that domain name into an IP address (the server which will serve the page HTML for our request). The duration of this process is what this metric measures.

    11. Server Connection Time

    Once the browser has resolved the domain name into an IP address, it now needs to connect to the web server. The Server Connection Time measures how long it took to establish a TCP connection to the server.

    12. Establish SSL/TLS Time

    Transport Layer Security (TLS) is an encryption protocol designed to secure communications over the Internet.

    Establish SSL/TLS Time measures how long it takes to perform a TLS handshake. During a TLS handshake, the two sides exchange messages to acknowledge and verify each other, establish which encryption algorithm will be used, and agree on session keys.

    This process is a foundational part of how HTTPS works, and is vital to ensure privacy and security while you browse the web.

    DNS, TCP Connect and TLS network timings
    Various network timings in Panelbear.

    13. Time to First Byte (TTFB)

    Time to First Byte (TTFB) is how long it takes from when a browser requests a page to when it receives the first byte of information from the server. This usually includes the time spent on DNS lookup, establishing the TCP connection, and the SSL/TLS handshake if the request was made over HTTPS.

    It's a good metric to approximate the performance of a backend server, from the perspective of the end user.

    Time to First Byte
    Inspecting the median TTFB for a website.

    Why is this metric important?

    If you measure the response time of your server from the server itself, you would only account for the time your server spent processing the request. In other words, the journey from your server to the user's browser would be unaccounted for.

    For example, say you are located in California and your server is located in an AWS data center in North Virginia. You measure your TTFB and you're happy to see a result of 25 ms. However, when a user from the EU or Australia opens your website, the TTFB is now 200-500 ms.

    The conclusion here might be that no matter if you scale your servers vertically or horizontally, the real issue is that the server is too far away from the end users. So you probably want to deploy servers in those regions too - assuming it makes sense for your product or business.

    14. HTML Download Time

    HTML Download Time measures the time it takes to download the initial document for a website. This document normally references various other resources (images, stylesheets, scripts) which are queued for download too.

    15. Render Time

    The Render Time measures how long it takes for the browser to paint the HTML document after downloading and parsing. This can vary a lot as it highly depends on the complexity of your site and the performance capabilities of the users device (eg. some mobile devices can take longer to render a complex website vs a powerful development machine).

    16. Request Count

    The Request Count refers to the number of resources required to load a web page. The impact of this metric on end user experience is highly dependent on other factors too.

    For example, if you have a website which requires 50 requests to load but most of them are small resources which do not block rendering, it may not negatively impact how the user interacts with the site.

    On the other hand, if you have a web page which requires a single request to load, but that request takes 10 seconds to complete and loads several megabytes of data, it's likely the user will abandon the site before the request completes.

    As with most other metrics, it's useful to measure request count in relation to the other characteristics of your web page.

    17. Transfer Size

    Transfer Size measures the total size of all assets transferred during page load. This includes every request for HTML, images, stylesheets, scripts, and JSON documents.

    It's a good measurement of how heavy your web page is.

    18. HTML Transfer Size

    The HTML Transfer Size tells you the size of all HTML assets transferred on page load.

    19. Image Transfer Size

    The Image Transfer Size tells you the size of all image assets transferred during page load.

    The following are examples of common image assets:

    Format name Extension MIME type Graphics Interchange Format (GIF) .gif image/gif Web Picture format (WEBP) .webp image/webp Portable Network Graphics (PNG) .png image/png AV1 Image File Format (AVIF) .avif image/avif Joint Photographic Expert Group image (JPEG) .jpeg, .jpg image/jpeg Scalable Vector Graphics (SVG) .svg image/svg+xml

    20. CSS Transfer Size

    CSS Transfer Size measures the total size of all stylesheet (CSS) assets transferred during page load.

    21. Font Transfer Size

    The Font Transfer Size tells you the size of all font assets transferred during page load.

    The following are examples of font assets:

    Format name Extension MIME type TrueType .ttf font/ttf Web Open Font Format .woff, .woff2 font/woff, font/woff2 OpenType .otf font/otf

    22. Javascript Transfer Size

    The Javascript Transfer Size measures the total size of all Javascript (JS) assets transferred during page load.

    For many modern web apps, this asset type has become a considerable chunk of the page load process. Large Javascript files may not only lead to longer download times, but also increase the time the browser needs to parse and render the site. This can negatively affect how long it takes for the site to become interactive too.

    In order to improve load times, many applications now rely on techniques such as tree shaking (automatically remove unused code), asset bundling (package related assets together) and code splitting (split files and only load as required for specific pages). A popular tool for these purposes is Webpack.

    23. JSON Transfer Size

    JSON Transfer Size measures the total size of all JSON assets transferred during page load.

    24. Video Transfer Size

    Video Transfer Size measures the total size of all video assets transferred during page load.

    Here are some examples of common video assets:

    Format name Extension MIME type WebM .webm video/webm Ogg .ogg video/ogg MPEG-4 .mp4 video/mp4 iPhone Index .m3u8 application/x-mpegURL iPhone Segment .ts video/MP2T Flash .flv video/x-flv 3GP Mobile .3gp video/3gpp QuickTime .mov video/quicktime A/V Interleave .avi video/x-msvideo Windows Media .wmv video/x-ms-wmv

    25. Javascript Error Count

    The Javascript Error Count tells you how many runtime errors the browser encountered while loading your web page.

    While on its own it's not enough to troubleshoot and debug errors, it's very helpful to track this metric in aggregate to ensure no deployments or configuration changes cause unintended issues during runtime.

    This metric is most useful when monitored in conjunction with error tracking software. That way, if the total error count goes beyond your tolerance threshold, your team would be able to troubleshoot the issue by inspecting the reported stack traces, and breadcrumbs to understand why the issue happened and fix it early.

    In Conclusion

    As previously mentioned, a faster website not only helps deliver a great user experience, but can also significantly boost your conversion rate and sales.

    Monitoring your website's performance over time is more important than ever in order to prevent unintended consequences when deploying bug fixes, adding third party scripts and making improvements to the site.

    That way you can make changes with confidence that you're not breaking stuff without realizing, and ensuring you always deliver a great experience on your website.

    I hope this guide comes useful to you. Also, be sure to check out my guide on website monitoring tools for various alternative tools you can use to monitor your frontend applications.

  • React 101: The Basics
    12 projects | dev.to | 30 Nov 2021
    I have written a post about setting up a React project using Parcel as a bundler which can give a more detailed walkthrough about getting a React application up and running from scratch. There are multiple ways to do this but some of the more common build tools include Webpack, Parcel, and Snowpack.
  • What is Create React App? Part 1 (Installation)
    3 projects | dev.to | 27 Nov 2021
    You don't have to worry about how to configure webpack or babel. Create React App configures all of that for you.
  • The Ultimate Guide to TypeScript Monorepos
    17 projects | dev.to | 26 Nov 2021
    Similar to Jest, it is very easy to use Webpack in a monorepo configured to use TypeScript project references. We can simply use the ts-loader loader, and everything should work automatically.
  • A New Type of Mojolicious Frontend
    5 projects | dev.to | 21 Nov 2021
    From there, we can install Typescript using Node. Since Typescript cannot bundle itself into a single file, we will also install Webpack:
  • Windster - Tailwind CSS admin dashboard interface [MIT License]
    7 projects | dev.to | 18 Nov 2021
    Webpack - module bundler (webpack.js.org)
  • Build a scalable front-end with Rush monorepo and React โ€” Repo Setup + Import projects + Prettier
    7 projects | dev.to | 17 Nov 2021
    Webpack
  • How to Create and Publish a React Component Library
    2 projects | dev.to | 17 Nov 2021
    Next we will add rollup to our project. If you've never used rollup before, it's very similar to webpack in that it is a tool for bundling individual Javascript modules into a single source that a browser is better able to understand.
  • Trying to run yarn but getting 'error:0308010C:digital envelope routines::unsupported'
    1 project | reddit.com/r/reactjs | 16 Nov 2021
    See if this helps, friend. https://github.com/webpack/webpack/issues/14532

What are some alternatives?

When comparing prettier and webpack you can also consider the following projects:

esbuild - An extremely fast JavaScript and CSS bundler and minifier

craco - Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app

vite - Next generation frontend tooling. It's fast!

Rollup - Next-generation ES module bundler

JS-Beautifier - Beautifier for javascript

black - The uncompromising Python code formatter

parcel - The zero configuration build tool for the web. ๐Ÿ“ฆ๐Ÿš€

gulp - A toolkit to automate & enhance your workflow

JSHint - JSHint is a tool that helps to detect errors and potential problems in your JavaScript code

ESLint - Find and fix problems in your JavaScript code.

Standard - ๐ŸŒŸ JavaScript Style Guide, with linter & automatic code fixer

Snowpack - ESM-powered frontend build tool. Instant, lightweight, unbundled development. โœŒ๏ธ