Merge pull request #766 from hexlet-codebattle/feature/reduce-bundle-…

…size Update webpack config and update packages
hexlet-codebattle · Jul 18, 2020 · 1b49905 · 1b49905
2 parents bfa2e7a + 44e8873
commit 1b49905
Show file tree

Hide file tree

Showing 22 changed files with 2,727 additions and 3,909 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,3 +53,5 @@ google.key.json
 .iml
 
 kubeconfig.yml
+
+stats.json
diff --git a/README.md b/README.md
@@ -66,6 +66,13 @@ $ mix issues.upload # Upsert issues by name in db
 #If you use docker in dev env, run commands in make compose-bash
 ```
 
+### Profile js bundle
+To build stat.json and see details in browser run:
+```
+yarn profile:build
+yarn profile:visualize
+```
+
 ### Support
 
 - <https://hexlet-ru.slack.com> channel: codebattle

diff --git a/services/app/.babelrc b/services/app/.babelrc
@@ -2,11 +2,15 @@
   "presets": [
     ["@babel/env", {
       "targets": { "node": "current" },
-      "ignoreBrowserslistConfig": true
+      "ignoreBrowserslistConfig": true,
+      "useBuiltIns": "usage",
+      "corejs": 3
     }],
     "@babel/react"
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
+    "lodash"
   ]
 }
diff --git a/services/app/Dockerfile b/services/app/Dockerfile
@@ -18,10 +18,10 @@ COPY . .
 
 RUN yarn install --froze-lockfile
 
-RUN ./node_modules/webpack/bin/webpack.js --mode production \
+RUN yarn build \
   && mix phx.digest
 
-RUN mix release  \
+RUN mix release \
   && mv _build/${build_env}/rel/${app_name} /opt/release
 
 FROM alpine:3.9.4

diff --git a/services/app/assets/js/__tests__/LobbyWidget.test.jsx b/services/app/assets/js/__tests__/LobbyWidget.test.jsx
@@ -24,7 +24,7 @@ test('test rendering GameList', async () => {
     gameList: {
       activeGames: [],
       completedGames: [
-        { level: 'elementary', players: [{ id: -4 }] },
+        { id: -1, level: 'elementary', players: [{ id: -4 }] },
       ],
       loaded: true,
       liveTournaments: [],

diff --git a/services/app/assets/js/app.js b/services/app/assets/js/app.js
@@ -13,8 +13,10 @@
 //
 // If you no longer want to use a dependency, remember
 // to also remove its path from "config.paths.watched".
+import 'core-js/stable';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'regenerator-runtime/runtime';
 import 'phoenix_html';
-import '@babel/polyfill';
 import '@fortawesome/fontawesome-free/js/all';
 import 'bootstrap';
 import NProgress from 'nprogress';

diff --git a/services/app/assets/js/i18n/index.js b/services/app/assets/js/i18n/index.js
@@ -24,5 +24,4 @@ i18next.init({
   },
 });
 
-
 export default i18next;
diff --git a/services/app/assets/js/widgets/components/CodebattleSliderBar.jsx b/services/app/assets/js/widgets/components/CodebattleSliderBar.jsx
@@ -48,5 +48,4 @@ const CodebattleSliderBar = ({ value: currentValue, lastIntent, isHold }) => {
   );
 };
 
-
 export default CodebattleSliderBar;
diff --git a/services/app/assets/js/widgets/components/DropdownMenuDefault.jsx b/services/app/assets/js/widgets/components/DropdownMenuDefault.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import i18n from '../../i18n';
 import levelToClass from '../config/levelToClass';
 
-
 const DropdownItem = ({ level, setLevel, setLevelClass }) => (
   <button
     key={level}

diff --git a/services/app/assets/js/widgets/components/EmojiPicker.jsx b/services/app/assets/js/widgets/components/EmojiPicker.jsx
@@ -13,7 +13,6 @@ export default function EmojiPicker({ handleSelect, hide }) {
     hide();
   };
 
-
   return (
     <div onBlur={handleBlur} ref={wrapperRef}>
       <Picker

diff --git a/services/app/assets/js/widgets/components/ExecutionOutput/AccordeonBox.jsx b/services/app/assets/js/widgets/components/ExecutionOutput/AccordeonBox.jsx
@@ -4,14 +4,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import _ from 'lodash';
 import i18n from '../../../i18n';
 
-
 const AccordeonBox = ({ children }) => (
   <div className="accordion border-top" id="accordionExample">
     { children }
   </div>
 );
 
-
 const Menu = ({
   count, children, statusColor, message,
 }) => {
@@ -53,7 +51,6 @@ const Menu = ({
   );
 };
 
-
 const SubMenu = ({
   children, statusColor, assert, hasOutput,
 }) => {
@@ -102,7 +99,6 @@ const SubMenu = ({
         ) : null}
       </div>
 
-
       {hasOutput ? (
         <div id={`collapse${uniqIndex}`} className={classCollapse} aria-labelledby={`heading${uniqIndex}`}>
           <div className="mt-3">
@@ -114,7 +110,6 @@ const SubMenu = ({
   );
 };
 
-
 const Item = ({ output, result = null }) => (
   <div className="alert alert-secondary mb-0">
     {result ? (
@@ -131,7 +126,6 @@ const Item = ({ output, result = null }) => (
   </div>
 );
 
-
 AccordeonBox.Item = Item;
 AccordeonBox.Menu = Menu;
 AccordeonBox.SubMenu = SubMenu;

diff --git a/services/app/assets/js/widgets/components/User/UserName.jsx b/services/app/assets/js/widgets/components/User/UserName.jsx
@@ -18,7 +18,6 @@ const getName = ({ id, name }, isCurrentUser) => {
   return isCurrentUser ? i18n.t('%{name} (you)', { name }) : name;
 };
 
-
 const displayDiff = num => {
   if (num < 0) {
     return <small className="text-danger">{` ${num}`}</small>;

diff --git a/services/app/assets/js/widgets/containers/ChatWidget.jsx b/services/app/assets/js/widgets/containers/ChatWidget.jsx
@@ -9,7 +9,6 @@ import ChatInput from '../components/ChatInput';
 import GameStatusCodes from '../config/gameStatusCodes';
 import 'emoji-mart/css/emoji-mart.css';
 
-
 const ChatWidget = () => {
   const users = useSelector(state => selectors.chatUsersSelector(state));
   const messages = useSelector(state => selectors.chatMessagesSelector(state));

diff --git a/services/app/assets/js/widgets/containers/EditorsToolbars/RightEditorToolbar.jsx b/services/app/assets/js/widgets/containers/EditorsToolbars/RightEditorToolbar.jsx
@@ -84,5 +84,4 @@ const RightEditorToolbar = () => {
   );
 };
 
-
 export default RightEditorToolbar;
diff --git a/services/app/assets/js/widgets/slices/editor.js b/services/app/assets/js/widgets/slices/editor.js
@@ -60,7 +60,6 @@ const meta = createSlice({
   },
 });
 
-
 const text = createSlice({
   name: 'text',
   initialState: initialState.text,

diff --git a/services/app/package.json b/services/app/package.json
@@ -7,10 +7,10 @@
   ],
   "scripts": {
     "test": "jest",
-    "watch": "webpack --watch-stdin --color --mode development",
-    "profile": "webpack --profile --json > stats.json",
-    "build-dev": "webpack --mode development",
-    "build-prod": "NODE_ENV=production webpack -p --mode production",
+    "watch": "webpack-dev-server --config ./webpack/webpack.dev.config.js",
+    "profile:build": "webpack --config ./webpack/webpack.build.config.js --profile --json > stats.json",
+    "profile:visualize": "npx webpack-bundle-analyzer stats.json",
+    "build": "webpack --config ./webpack/webpack.build.config.js",
     "lint": "eslint --ext js,jsx ./assets/js"
   },
   "jest": {
@@ -21,22 +21,22 @@
     }
   },
   "dependencies": {
-    "@babel/polyfill": "^7.10.1",
+    "@babel/runtime": "^7.10.5",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/react-fontawesome": "^0.1.10",
     "@reduxjs/toolkit": "^1.3.6",
     "axios": "^0.19.2",
-    "babel-runtime": "^6.26.0",
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
+    "core-js": "3.6",
     "emoji-mart": "^3.0.0",
     "font-mfizz": "^2.4.1",
     "humps": "^2.0.1",
     "i18next": "^19.4.5",
     "jquery": "^3.5.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.26.0",
     "monaco-ace-tokenizer": "^0.2.0",
@@ -68,20 +68,23 @@
     "set-value": "^3.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.10.1",
-    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/plugin-proposal-decorators": "^7.10.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.10.1",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
     "@testing-library/jest-dom": "^5.9.0",
     "@testing-library/react": "^10.2.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.1.0",
+    "babel-plugin-lodash": "^3.3.4",
     "copy-webpack-plugin": "^6.0.2",
-    "css-loader": "^3.5.3",
+    "css-loader": "^3.6.0",
     "eslint": "^7.2.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "2.20.2",
@@ -90,7 +93,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.4",
-    "exports-loader": "^0.7.0",
+    "exports-loader": "^1.1.0",
     "file-loader": "^6.0.0",
     "i18next-po-loader": "^1.0.0",
     "image-webpack-loader": "^6.0.0",
@@ -103,9 +106,9 @@
     "resolve-url-loader": "^3.1.1",
     "sass-loader": "^8.0.2",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack": "^4.41.5",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.0.9"
   }
 }
diff --git a/services/app/webpack.config.js b/services/app/webpack.config.js