Add "sideEffects" for webpack tree-shaking & Use lodash-webpack-plugin & Upgrade dependencies & Bump version

Author: wellyshen

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cool-starter",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "A starter boilerplate for an universal web application with the best development experience and best practices.",
   "main": "index.js",
   "engines": {
@@ -32,10 +32,11 @@
   ],
   "author": "WellyShen <hivoid19@gmail.com> (https://github.com/wellyshen)",
   "license": "MIT",
+  "homepage": "https://github.com/wellyshen/react-cool-starter",
   "bugs": {
     "url": "https://github.com/wellyshen/react-cool-starter/issues"
   },
-  "homepage": "https://github.com/wellyshen/react-cool-starter",
+  "sideEffects": false,
   "scripts": {
     "dev": "better-npm-run dev",
     "start": "better-npm-run start",
@@ -144,13 +145,11 @@
   "eslintConfig": {
     "parser": "babel-eslint",
     "extends": [
-      "plugin:lodash-fp/recommended",
       "airbnb",
       "prettier",
       "prettier/react"
     ],
     "plugins": [
-      "lodash-fp",
       "react",
       "prettier"
     ],
@@ -196,8 +195,6 @@
           ]
         }
       ],
-      "lodash-fp/use-fp": "off",
-      "lodash-fp/consistent-name": "off",
       "prettier/prettier": [
         "error",
         {
@@ -284,7 +281,7 @@
     "babel-plugin-transform-remove-console": "^6.9.4",
     "better-npm-run": "^0.1.0",
     "chalk": "^2.4.1",
-    "compression": "^1.7.2",
+    "compression": "^1.7.3",
     "cross-spawn": "^6.0.5",
     "css-modules-require-hook": "^4.2.3",
     "express": "^4.16.3",
@@ -316,7 +313,6 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.53",
     "@babel/core": "^7.0.0-beta.53",
-    "@babel/plugin-external-helpers": "^7.0.0-beta.53",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^8.2.6",
     "babel-jest": "^23.4.0",
@@ -334,7 +330,6 @@
     "eslint-loader": "^2.0.0",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-lodash-fp": "^2.2.0-a1",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.9.1",
     "file-loader": "^1.1.11",
@@ -343,6 +338,7 @@
     "identity-obj-proxy": "^3.0.0",
     "imagemin-webpack-plugin": "^2.1.5",
     "jest": "^23.4.1",
+    "lodash-webpack-plugin": "^0.11.5",
     "mini-css-extract-plugin": "^0.4.1",
     "nock": "^9.4.2",
     "nodemon": "^1.18.2",
@@ -362,7 +358,7 @@
     "stylelint-scss": "^3.1.3",
     "stylelint-webpack-plugin": "^0.10.5",
     "url-loader": "^1.0.1",
-    "webpack": "^4.16.0",
+    "webpack": "^4.16.1",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-cli": "^3.0.8",
     "webpack-dev-middleware": "^3.1.3",

public/webpack-assets.json

@@ -1,8 +1,8 @@
 {
-  "vendors~main.css": "/assets/0.fec759bc.chunk.css",
-  "vendors~main.js": "/assets/0.6eb50866.chunk.js",
-  "vendors~main.js.map": "/assets/0.6eb50866.chunk.js.map",
-  "main.css": "/assets/main.f1573851.css",
-  "main.js": "/assets/main.e5919db2.js",
-  "main.js.map": "/assets/main.e5919db2.js.map"
+  "vendors~main.css": "/assets/1.c5e26978.chunk.css",
+  "vendors~main.js": "/assets/1.688cde24.chunk.js",
+  "vendors~main.js.map": "/assets/1.688cde24.chunk.js.map",
+  "main.css": "/assets/main.dbaa56e0.css",
+  "main.js": "/assets/main.955839ce.js",
+  "main.js.map": "/assets/main.955839ce.js.map"
 }

src/config/prod.js

@@ -1,9 +1,9 @@
 /* @flow */
 
-const fp = require('lodash/fp');
+const _ = require('lodash');
 
 const defaultConfig = require('./default');
 
-module.exports = fp.merge(defaultConfig, {
+module.exports = _.merge(defaultConfig, {
   // Over write default settings here...
 });

src/reducers/home.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import fp from 'lodash/fp';
+import _ from 'lodash';
 
 import type { Home, Action } from '../types';
 
@@ -15,16 +15,16 @@ const initialState = {
 export default (state: State = initialState, action: Action): State => {
   switch (action.type) {
     case 'USERS_REQUESTING':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         readyStatus: 'USERS_REQUESTING'
       });
     case 'USERS_FAILURE':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         readyStatus: 'USERS_FAILURE',
         err: action.err
       });
     case 'USERS_SUCCESS':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         readyStatus: 'USERS_SUCCESS',
         list: action.data
       });

src/reducers/userInfo.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import fp from 'lodash/fp';
+import _ from 'lodash';
 
 import type { UserInfo, Action } from '../types';
 
@@ -9,20 +9,20 @@ type State = UserInfo;
 export default (state: State = {}, action: Action): State => {
   switch (action.type) {
     case 'USER_REQUESTING':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         [action.userId]: {
           readyStatus: 'USER_REQUESTING'
         }
       });
     case 'USER_FAILURE':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         [action.userId]: {
           readyStatus: 'USER_FAILURE',
           err: action.err
         }
       });
     case 'USER_SUCCESS':
-      return fp.assign(state, {
+      return _.assign({}, state, {
         [action.userId]: {
           readyStatus: 'USER_SUCCESS',
           info: action.data

tools/webpack/config.babel.js

@@ -3,6 +3,7 @@ import webpack from 'webpack';
 import ManifestPlugin from 'webpack-manifest-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
+import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
 import StyleLintPlugin from 'stylelint-webpack-plugin';
 import CompressionPlugin from 'compression-webpack-plugin';
 import ImageminPlugin from 'imagemin-webpack-plugin';
@@ -61,6 +62,8 @@ const getPlugins = () => {
       }),
       // Minimizing style for production
       new OptimizeCssAssetsPlugin(),
+      // Smaller modular Lodash build
+      new LodashModuleReplacementPlugin(),
       // Plugin to compress images with imagemin
       // Check "https://github.com/Klathmon/imagemin-webpack-plugin" for more configurations
       new ImageminPlugin({
@@ -138,10 +141,13 @@ module.exports = {
           plugins: [
             'react-hot-loader/babel',
             'loadable-components/babel',
-            '@babel/plugin-external-helpers',
             'lodash'
           ],
-          env: { production: { plugins: ['transform-remove-console'] } }
+          env: {
+            production: {
+              plugins: ['transform-remove-console']
+            }
+          }
         }
       },
       {