hw6

.github/workflows/sitespeed_io.yml

@@ -0,0 +1,11 @@
+name: sitespeed.io
+on: push
+jobs:
+  run-sitespeed:
+    runs-on: ubuntu-latest
+    name: running sitespeed.io
+    steps:
+      - name: code checkout
+        uses: actions/checkout@v2
+      - name: running sitespeed.io container with arguments and optional Docker options
+        run: docker run -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:latest https://www.sitespeed.io  -n 1 --budget.configPath ./homeBudget.json

Gemfile

@@ -16,7 +16,7 @@ end
 gem "actionpack-action_caching", "~> 1.2"
 gem "active_record_union", "~> 1.3"
 gem "acts-as-taggable-on", "~> 5.0"
-gem "acts_as_follower", github: "thepracticaldev/acts_as_follower", branch: "master"
+gem "acts_as_follower", github: "forem/acts_as_follower", branch: "master"
 gem "addressable", "~> 2.5", ">= 2.5.2"
 gem "administrate", "~> 0.11"
 gem "ahoy_email", "~> 0.5"
@@ -122,7 +122,7 @@ group :development, :test do
   gem "derailed", "~> 0.1"
   gem "erb_lint", "~> 0.0", require: false
   gem "faker", git: "https://github.com/stympy/faker.git", branch: "master"
-  gem "fix-db-schema-conflicts", github: "thepracticaldev/fix-db-schema-conflicts", branch: "master"
+  gem "fix-db-schema-conflicts", github: "jakeonrails/fix-db-schema-conflicts", branch: "master"
   gem "memory_profiler", "~> 0.9"
   gem "parallel_tests", "~> 2.27"
   gem "pry-byebug", "~> 3.7"

Gemfile.lock

@@ -1,26 +1,26 @@
 GIT
-  remote: https://github.com/stympy/faker.git
-  revision: 9910aa58d92c018abab25d491191576fcc1a7707
+  remote: https://github.com/forem/acts_as_follower.git
+  revision: 06393d3693a1a3d4b390aec4976c8b8f3a81cf01
   branch: master
   specs:
-    faker (1.9.1)
-      i18n (>= 0.7)
+    acts_as_follower (0.2.1)
+      activerecord (>= 4.0)
 
 GIT
-  remote: https://github.com/thepracticaldev/acts_as_follower.git
-  revision: 288690cd99bc470eaee493fce5bfa9fe23157692
+  remote: https://github.com/jakeonrails/fix-db-schema-conflicts.git
+  revision: 1e94f518503f1d1addd6ed052454efcbec0b3c6a
   branch: master
   specs:
-    acts_as_follower (0.2.1)
-      activerecord (>= 4.0)
+    fix-db-schema-conflicts (3.1.0)
+      rubocop (>= 0.38.0)
 
 GIT
-  remote: https://github.com/thepracticaldev/fix-db-schema-conflicts.git
-  revision: 4172392392e1a8d907f7ab673cb5ddd9a4a31940
+  remote: https://github.com/stympy/faker.git
+  revision: 9910aa58d92c018abab25d491191576fcc1a7707
   branch: master
   specs:
-    fix-db-schema-conflicts (3.0.2)
-      rubocop (>= 0.38.0)
+    faker (1.9.1)
+      i18n (>= 0.7)
 
 GEM
   remote: https://rubygems.org/

case-study.md

@@ -0,0 +1,20 @@
+# HW6
+
+## 1. Budget
+
+Добавил бюджет, запускаю `sitespeed.io`.
+Фейл, как и ожидалось, размер JS `1.1 MB`, `max limit 449.2 KB`.
+
+## 2. Analyze
+
+Запустил сборку с `webpack-bundle-analyzer`, самый большой чанк `proCharts`, в нем больший размер у `moment` и `chart.js`.
+
+## 3. Optimization
+
+`proCharts` подключается только во `views/dashboards/pro`, поэтому можно попробовать исключить из `vendor` `chart.js` и `moment`, добавив условия в параметр `minChunks`.
+
+## 4. Result
+
+Мы уложились в бюджет 460кб, добавим защиту от регрессии с помощью `sitespeed.io` в `CI`.
+
+Со второго раза в бюджет немного не уложился, поэтому поднял бюджет до 500кб.

config/webpack/development.js

@@ -1,4 +1,16 @@
 const environment = require('./environment');
+
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+
+environment.plugins.append(
+  'BundleAnalyzer',
+  new BundleAnalyzerPlugin({
+    analyzerMode: 'static',
+    openAnalyzer: true,
+  }),
+);
+
 const config = environment.toWebpackConfig();
 
 // For more information, see https://webpack.js.org/configuration/devtool/#devtool

config/webpack/environment.js

@@ -8,27 +8,31 @@
 
 // module.exports = environment;
 
-
-const { environment } = require('@rails/webpacker')
-const webpack = require('webpack')
+const { environment } = require('@rails/webpacker');
+const webpack = require('webpack');
 
 environment.plugins.append(
   'CommonsChunkVendor',
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
-    minChunks: (module) => {
+    minChunks: module => {
       // this assumes your vendor imports exist in the node_modules directory
-      return module.context && module.context.indexOf('node_modules') !== -1
-    }
-  })
-)
+      return (
+        module.context &&
+        module.context.indexOf('node_modules') !== -1 &&
+        module.context.indexOf('moment') === -1 &&
+        module.context.indexOf('chart.js') === -1
+      );
+    },
+  }),
+);
 
 environment.plugins.append(
   'CommonsChunkManifest',
   new webpack.optimize.CommonsChunkPlugin({
     name: 'manifest',
-    minChunks: Infinity
-  })
-)
+    minChunks: Infinity,
+  }),
+);
 
-module.exports = environment
+module.exports = environment;

homeBudget.json

@@ -0,0 +1,7 @@
+{
+  "budget": {
+    "transferSize": {
+      "javascript": 500000
+    }
+  }
+}

package.json

@@ -99,7 +99,8 @@
     "prop-types": "^15.7.2",
     "pusher-js": "^4.4.0",
     "twilio-video": "^1.15.2",
-    "web-share-wrapper": "^0.2.1"
+    "web-share-wrapper": "^0.2.1",
+    "webpack-bundle-analyzer": "^4.5.0"
   },
   "jest": {
     "setupFiles": [