GoogleChromeLabs/webpack-training-project

Name: webpack-training-project

Owner: GoogleChromeLabs

Description: A training project for learning Webpack optimizations

Created: 2017-12-07 21:35:41.0

Updated: 2018-05-22 00:58:41.0

Pushed: 2018-04-17 17:08:53.0

Homepage:

Size: 438

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Webpack performance project

A month ago, a popular open-source hosting company decided to build a new extra-light version of its main product ? a site with all open-source projects it hosts. They planned that people will use this site on devices with a poor network. They called this product LitHub.

As soon as LitHub started, the company realized that all developers are busy on different projects. Somehow, they managed to find a developer who agreed to create this product in their overtime. But two days ago the developer switched the department, and the company decided to hire you to finish the work.

The developer completed the features but didn?t have time to do the only thing left ? to optimize the project. Now you have to do this for them instead. The fate of LitHub lies on your shoulders!

The LitHub logo.

Task

Using webpack, optimize this repository to make it as small and as network-effective as possible. Here?s what to look at:

• app size (hint: it could be decreased to roughly 160 KB ? or even further);
• caching effectiveness.

Focus on changing the webpack config, but don?t be afraid to change the app too ? e.g., some optimizations might come from replacing dependencies.

Use the article about performance optimization with webpack for help.

Want to see our solution? Check issue #1.

Want to discuss this task? Join the Gitter chat.

How to develop the app

Initialize the environment

1. Clone the repository:

clone https://github.com/iamakulov/webpack-training-project.git

2. Install the dependencies:

install

3. Generate a GitHub access token: run

run token

and follow the instructions.

Launch the app

1. Run the development server:

run dev:server

2. Open localhost:8080 to see the live app.

Optimize!

1. Apply an optimization.

Note: if you?re applying an optimization in the webpack config, it?s a good practice to apply it only for production builds. Optimizations slow down the build, which is undesirable during development.

To apply an optimization in the production mode, do something like this:

ebpack.config.js
t isProduction = process.env.NODE_ENV === 'production';

le.exports = {
 ... */
ugins: [
// Common plugins
concat(
isProduction
  ? [
      // A plugin that optimizes something in production
    ]
  : [],

2. Run the production build to see if this change affects the size:

run prod:build

3. If you?re optimizing caching, run the production server to see if the change helps:

run prod:server

What?s in the repo

This repo includes the source code of LitHub. The app has the following structure:

ers         // Console helpers *for you* that validate
            // a few things during the build.
            // Just don?t care about them.

ic          // Static public files (HTML and CSS files)
uild        // Results of the webpack build (JS and SVG files)


pi         // The API module that makes requests to GitHub API
omponents  // Components that get rendered into the page.
           // Just plain JS, no frameworks (see ?How components work?
           // below for additional info)
emplates   // Templates of HTML pages
tils       // Additional utilities
ndex.js    // The entry point. Renders the application
nitDevelopmentHelpers.js
           // ? A helper *for you* that validates a few things
           // and displays errors in a red box. Just don?t care about it.

elrc
ignore
age.json
age-lock.json
ME.md
-github-token.js
           // ? A script that fills the GitHub access token.
ack.config.js
           // ? The webpack config file

How components work

LitHub is built using components, where each component renders a widget on a screen (possibly calling child components).

A component is a plain function that accepts a target (a node where it must be rendered) and a data object to use when rendering the component (e.g. a username). The data argument is optional:

t component = (/** HTMLElement */ target, /**Object */ data) => {
 Render a component

A simple component might look like this:

ill render <p>User <username></p> into the target
t component = (target, { username }) => {
nst content = document.createElement('div');
ntent.innerHTML = `<p>User ${username}</p>`;
rget.appendChild(content);


onent(document.querySelector('#root'), {
ername: 'john-smith',

A component could do anything inside itself ? from calling other components to setting up event listeners.