didi0613

Upgrade to webpack 4

Config changes

Mode

• Specify the mode (development/production) explicitly for running webpack.

Plugins

didi0613

Upgrade Components To React 16

React 16 includes a number of small breaking changes. They only affect uncommon use cases and we don’t expect them to break most apps. So if you have apps running in 15.6 without any warnings, upgrade to 16 should be easy for you.

Reference: https://reactjs.org/blog/2017/09/26/react-v16.0.html

Changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md

These are the things you need to be aware of when updating from React 15 to 16:

didi0613

Shorten css class names for css module

Jira Ticket

https://jira.walmart.com/browse/CEECORE-255

Background

Electrode Application can use css-modules as one of the style options, CSS names can get long with local identifier name and random hash.

didi0613

2018 JIRA Tickets

All the tickets are sorted by dates. Some tickets are finished earlier this year(Feb 2018), not sure if i should

Bugs:

• incorrect zindex optimization with IE9
• webpack-reporter fixes
• Electrode sample component based on new archetype component

didi0613

Switch to OSS app archetype

Changes Required

• Update your dependencies inside package.json

  Switch internal app archetype

  @walmart/electrode-archetype-react-app
  @walmart/electrode-archetype-react-app-dev
  

didi0613

Webpack 3 & 4 Performance Comparison

Home App

webpack 3

Hash: 8cd9886d070e82aa564e
Version: webpack 3.12.0
Time: 29991ms

didi0613

Webpack 4 performance report on home app

Version: webpack 4.20.2
Time: 28190ms
Built at: 2018-10-09 15:07:19
                                                          Asset      Size  Chunks Chunk Names
                 homepage_styles.style.d946634cbdd1f45455ed.css   192 KiB       2  [emitted] homepage_styles
                           1812c8940a09b7e8de827e9e19a63ecb.eot   119 KiB          [emitted]
                          6560fefbed8fc6693665874ad7aa5565.woff  58.8 KiB          [emitted]

didi0613

Core Module Bundle Size Instruction

Clone the CLI tool

Clone core-modules-bundle-size CLI tool to your local

git clone https://gecgithub01.walmart.com/s0d00px/core-modules-bundle-size

didi0613

Code Modules Bundle Size Comparison

Option #1: CLI Tool

How does the CLI Tool work?

Generate JS files

didi0613

Duplicated dependencies list for grocery app

From electrode-archetype-react-app(-dev)

• babel-plugin-transform-object-rest-spread
• prop-types
• react
• react-dom
• webpack
• autoprefixer
• babel-eslint
• babel-polyfill