improved bundling, webpack, babel (#7)

Author: natterstefan

.babelrc

@@ -1,8 +1,15 @@
 {
-  "presets": [["env", { "targets": { "chrome": 54, "safari": 10 } }], "stage-2", "react"],
+  "presets": [
+    ["env", { "targets": { "chrome": 54, "safari": 10 }, "modules": false }],
+    "stage-2",
+    "react"
+  ],
   "env": {
     "production": {
       "plugins": ["transform-react-remove-prop-types"]
+    },
+    "test": {
+      "presets": [["env", { "targets": { "chrome": 54, "safari": 10 } }], "stage-2", "react"]
     }
   }
 }

.eslintignore

@@ -12,3 +12,4 @@ __snapshots__
 webpack/base.config.js
 webpack/dev.config.js
 webpack/prod.config.js
+webpack/prod.analyse.config.js

CHANGES.md

@@ -10,6 +10,11 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 * custom `<TrelloCardUi />` component added (replaces Trello's embedded iframe)
 * fallback for missing `avatarHash` implemented (use member's `initials`) added
+* `sideEffects` option for webpack's treeshaking feature added, `.babelrc` modified
+  (`"modules": false`) and prod.config.js (webpack config) updated as well. Read more about
+  treeshaking [here](https://webpack.js.org/guides/tree-shaking/),
+  [here](https://stackoverflow.com/a/47675519/1238150) and
+  [here](https://github.com/webpack/webpack/issues/6992#issuecomment-379662391).
 
 ### Changed
 

README.md

@@ -141,8 +141,9 @@ proposals.
 
 The following scripts are available (also work with `npm run`):
 
-* `yarn run lint`: lints the js-code with Eslint (without `--fix`)
-* `yarn run lint:scss`: lints the scss-code with Stylelint (without `--fix`)
+* `yarn analyse`: bundles the production build and analyses it with [Jarvis][4], see other analyse [here][5].
+* `yarn lint`: lints the js-code with Eslint (without `--fix`)
+* `yarn lint:scss`: lints the scss-code with Stylelint (without `--fix`)
 * `yarn start`: starts the app with the webpack-dev-server
 * `yarn test`: runs tests with jest
 * `yarn test:watch`: runs tests with jest in watch mode
@@ -187,4 +188,6 @@ MIT
 [1]: https://trello.com/app-key
 [2]: http://localhost:2222/#/
 [3]: https://github.com/natterstefan/react-trello-multiboard/issues
+[4]: https://github.com/zouhir/jarvis
+[5]: https://survivejs.com/webpack/optimizing/build-analysis/
 [natterstefan]: https://github.com/natterstefan

package.json

@@ -17,7 +17,10 @@
     "npm": ">=5.6.0",
     "yarn": ">=1.3.0"
   },
+  "sideEffects": false,
   "scripts": {
+    "analyse": "npm run build:clean-dist && cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.analyse.config.js",
+    "analyse:size": "size-limit",
     "build": "npm run build:clean-dist && cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack/prod.config.js",
     "build:clean-dist": "rm -rf dist",
     "build:dev": "npm run build:clean-dist && webpack --config webpack/dev.config.js",
@@ -27,7 +30,7 @@
     "lint": "eslint ./src",
     "lint:scss": "stylelint ./src",
     "postinstall": "./node_modules/.bin/cpy \"./config/config.example.js\" \"./config\" --no-overwrite --rename=\"config.js\"",
-    "precommit": "lint-staged",
+    "precommit": "npm run analyse:size && lint-staged",
     "prepush": "npm test",
     "start": "webpack-dev-server --hot --config webpack/dev.config.js",
     "test": "jest",
@@ -47,6 +50,18 @@
       "jest --findRelatedTests"
     ]
   },
+  "size-limit": [
+    {
+      "limit": "100 KB",
+      "webpack": false,
+      "path": "dist/src/*.client.bundled.js"
+    },
+    {
+      "limit": "550 KB",
+      "webpack": false,
+      "path": "dist/src/*.vendors~client.bundled.js"
+    }
+ ],
   "peerDependencies": {
     "material-ui": "1.0.0-beta.36",
     "material-ui-icons": "1.0.0-beta.36",
@@ -109,6 +124,7 @@
     "prettier": "1.12.1",
     "redux-mock-store": "1.5.1",
     "sass-loader": "7.0.1",
+    "size-limit": "0.18.1",
     "stylelint": "9.2.0",
     "stylelint-config-sass-guidelines": "5.0.0",
     "uglifyjs-webpack-plugin": "1.2.5",

src/components/trello-cards-list/component.js

@@ -5,7 +5,7 @@ import Typography from 'material-ui/Typography'
 import { LinearProgress } from 'material-ui/Progress'
 import styled from 'styled-components'
 
-import proptypes from './prop-types'
+import proptypes from './prop-types' // eslint-disable-line
 import TrelloCard from '../trello-card'
 
 const ColumnContainer = styled.div`

src/components/trello-cards-list/prop-types.js

@@ -18,7 +18,7 @@ export const proptypes = {
   cards: PropTypes.arrayOf(
     PropTypes.shape({
       card,
-      ...listConfig,
+      listConfig,
     }),
   ),
   config: listConfig,
@@ -27,3 +27,5 @@ export const proptypes = {
   list,
   loadCards: PropTypes.func.isRequired,
 }
+
+export default proptypes

webpack/prod.analyse.config.js

@@ -0,0 +1,12 @@
+const production = require('./prod.config.js')
+const merge = require('webpack-merge')
+const Jarvis = require('webpack-jarvis')
+
+module.exports = merge(production, {
+  plugins: [
+    new Jarvis({
+      port: 3333,
+      watchOnly: false
+    }),
+  ]
+})

webpack/prod.config.js

@@ -1,6 +1,6 @@
 const common = require('./base.config.js')
 const merge = require('webpack-merge')
-const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
@@ -12,13 +12,29 @@ module.exports = merge(common, {
     // https://webpack.js.org/plugins/split-chunks-plugin/
     splitChunks: {
       chunks: 'initial' // default splitting, or 'all'
-    }
-  },
+    },
+    // inspired by and some issues to read more about treeshaking in webpack
+    // - https://github.com/gpspake/es6-todomvc/blob/c6e30fc6676ec362f3f4be8ec41df27c12007b8b/webpack.config.babel.js
+    // - https://stackoverflow.com/a/47675519/1238150 (treeshaking w/ change in .babelrc)
+    //   - see also: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/247#issuecomment-370911955
+    // - https://github.com/webpack-contrib/uglifyjs-webpack-plugin/issues/267 (Webpack 4 Issue)
+    // - https://github.com/webpack/webpack/issues/6992 (Webpack 4 Issue)
+    minimizer: [
+      new UglifyJsPlugin({
+        parallel: true,
+        sourceMap: false,
+        uglifyOptions: {
+          compress: {
+            drop_console: true,
+            dead_code: true,
+          },
+          output: {
+            beautify: false,
+            comments: false,
+          }
+        }
+      })
+    ]
+  }
 
-  plugins: [
-    new UglifyJSPlugin({
-      parallel: true,
-      sourceMap: false
-    })
-  ]
 })