ДЗ 6

.github/workflows/webpack-budget-ci.yml

@@ -0,0 +1,10 @@
+name: Webpack Budget CI
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: code checkout
+        uses: actions/checkout@v2
+      - name: run sitespeedio test
+        run: docker run -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:latest https://68e8-212-164-65-73.eu.ngrok.io/ --budget.configPath budget.json -n 1

.gitignore

@@ -52,4 +52,6 @@ package-lock.json
 .idea/
 
 #sitemap
-/public/sitemap.xml.gz
+/public/sitemap.xml.gz
+
+sitespeed-result/

.ruby-gemset

@@ -0,0 +1 @@
+thinknetica

.ruby-version

@@ -1 +1 @@
-2.6.1
+ruby-2.6.1

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: 'tcocca/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"
   gem "memory_profiler", "~> 0.9"
   gem "parallel_tests", "~> 2.27"
   gem "pry-byebug", "~> 3.7"

Gemfile.lock

@@ -7,21 +7,13 @@ GIT
       i18n (>= 0.7)
 
 GIT
-  remote: https://github.com/thepracticaldev/acts_as_follower.git
-  revision: 288690cd99bc470eaee493fce5bfa9fe23157692
+  remote: https://github.com/tcocca/acts_as_follower.git
+  revision: c5ac7b9601c4af01eb4d9112330b27be4d694ecc
   branch: master
   specs:
     acts_as_follower (0.2.1)
       activerecord (>= 4.0)
 
-GIT
-  remote: https://github.com/thepracticaldev/fix-db-schema-conflicts.git
-  revision: 4172392392e1a8d907f7ab673cb5ddd9a4a31940
-  branch: master
-  specs:
-    fix-db-schema-conflicts (3.0.2)
-      rubocop (>= 0.38.0)
-
 GEM
   remote: https://rubygems.org/
   remote: https://rails-assets.org/
@@ -322,6 +314,8 @@ GEM
       thor (~> 0.14)
     fission (0.5.0)
       CFPropertyList (~> 2.2)
+    fix-db-schema-conflicts (3.1.0)
+      rubocop (>= 0.38.0)
     fog (1.41.0)
       fog-aliyun (>= 0.1.0)
       fog-atmos
@@ -992,7 +986,7 @@ DEPENDENCIES
   fastly-rails (~> 0.8)
   feedjira (~> 2.2)
   figaro (~> 1.1)
-  fix-db-schema-conflicts!
+  fix-db-schema-conflicts
   fog (~> 1.41)
   front_matter_parser (~> 0.2)
   gemoji (~> 3.0.0)

budget.json

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

case-study.md

@@ -0,0 +1,52 @@
+## Проблема
+
+На проекте возникла проблема: объем загружаемого `vendor.js` слишком велик, было решено установить бюджет для `JavaScript` в 550K.
+
+## Подготовка
+
+Настроил бюджет:
+
+```json
+{
+  "budget": {
+    "transferSize": {
+      "javascript": 550000
+    }
+  }
+}
+```
+
+Далее я запустил `sitespeed.io` и убедился, что бюджет не соблюдается:
+
+```
+INFO: Failing budget JavaScript Transfer Size for http://172.17.0.1:3000/ with value 3.6 MB max limit 537.1 KB
+INFO: Budget: 0 working, 1 failing tests and 0 errors
+```
+
+## Оптимизация
+
+Я подключил `webpack-bundle-analyzer` для детализации объемов используемого `JavaScript` и выяснил, что больше всего потребляют библиотеки `moment.js` и `Chart.js`.
+
+![image](wba_before.png)
+
+Я исключил библиотеки `moment.js` и `Chart.js` из загрузки в `vendor.js`:
+
+![image](wba_after.png)
+
+И теперь тест на бюджет проходит успешно:
+
+```
+INFO: Budget: 1 working, 0 failing tests and 0 errors
+```
+
+## Настройка CI
+
+Для защиты от регрессии я использовал `ngrok` и GitHub Actions:
+
+- [x] Зарегистрировался на ngrok.com.
+- [x] Установил `ngrok`, добавил токен.
+- [x] Пробросил приложение.
+- [x] Создал конфиг Actions.
+- [x] Запушил код.
+
+[Все прошло успешно](https://github.com/hworoshch/rails-optimization-task6/runs/7384554383).

config/webpack/environment.js

@@ -11,17 +11,22 @@
 
 const { environment } = require('@rails/webpacker')
 const webpack = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 environment.plugins.append(
   'CommonsChunkVendor',
   new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
-    minChunks: (module) => {
-      // this assumes your vendor imports exist in the node_modules directory
-      return module.context && module.context.indexOf('node_modules') !== -1
-    }
-  })
-)
+    minChunks: module => {
+      return (
+        module.context &&
+        module.context.indexOf('node_modules') !== -1 &&
+        module.context.indexOf('moment') === -1 &&
+        module.context.indexOf('chart') === -1
+      );
+    },
+  }),
+);
 
 environment.plugins.append(
   'CommonsChunkManifest',
@@ -31,4 +36,11 @@ environment.plugins.append(
   })
 )
 
+environment.plugins.append(
+  'BundleAnalyzer', new BundleAnalyzerPlugin({
+    analyzerMode: 'static',
+    openAnalyzer: true,
+  }),
+)
+
 module.exports = environment

package.json

@@ -82,6 +82,7 @@
     "preact-render-spy": "^1.3.0",
     "preact-render-to-json": "^3.6.6",
     "prettier": "^1.16.4",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^2.11.3"
   },
   "dependencies": {