alancasagrande

const path = require("path");

module.exports = {
  ...

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        defaultVendors: {

alancasagrande

import _ from "lodash";

alancasagrande

import join from "lodash/join";

function HelloComponent() {
  const element = document.createElement("div");
  element.innerText = join(
    ["Hello from bundle size demo", "with lodash join"],
    " "
  );
  return element;
}

alancasagrande

function HelloComponent() {
  const button = document.createElement('button');
  button.innerText = 'Hello';
  button.onclick = () => {
    return import(
      /* webpackChunkName: "lodash" */
      'lodash/join'
    ).then(({ default: join }) => {
      const greeting = join(
        ['Hello from bundle size demo', 'with lodash loaded dynamically'],

alancasagrande

import { join } from "lodash";

alancasagrande

plugins: [
  new webpack.IgnorePlugin({
    resourceRegExp: /^\.\/locale$/,
    contextRegExp: /moment$/,
  }),
  new BundleAnalyzerPlugin({ openAnalyzer: false }),
];

alancasagrande

<script src="vendors.js"></script>

alancasagrande

import moment from 'moment';

function HelloComponent() {
  const element = document.createElement('div');
  element.innerText = `Now ${moment().format('L LT')}`;
  return element;
}

document.body.appendChild(HelloComponent());

alancasagrande

import React, { useState } from 'react';
import Login from './Login';

export default function App({ user }) {
  // user not logged in, show login form
  if (!user) return <Login />;

  return (
    <div>
      Hello, {user.username}. <a href="/logout">Logout</a>

alancasagrande

export async function login(username, password) {
  const res = await fetch('/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password }),
  });

  if (res.status === 401) return {};

  const user = await res.json();