task 6

.github/workflows/master.yml

@@ -0,0 +1,14 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build-app:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: js budget check
+        uses: docker://sitespeedio/sitespeed.io:latest
+        with:
+          args: https://8b1b-2a02-a310-c25a-f500-a479-5be6-50d3-1088.ngrok.io  -n 1 --budget.configPath ./budget.json

Dockerfile

@@ -2,7 +2,7 @@ FROM ruby:2.6.1
 
 # Make nodejs and yarn as dependencies
 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
-RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
+RUN curl -sL https://deb.nodesource.com/setup_16.x | bash
 RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
 
 # Install dependencies and perform clean-up

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", 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,3 +1,11 @@
+GIT
+  remote: https://github.com/jakeonrails/fix-db-schema-conflicts.git
+  revision: 1e94f518503f1d1addd6ed052454efcbec0b3c6a
+  branch: master
+  specs:
+    fix-db-schema-conflicts (3.1.0)
+      rubocop (>= 0.38.0)
+
 GIT
   remote: https://github.com/stympy/faker.git
   revision: 9910aa58d92c018abab25d491191576fcc1a7707
@@ -7,21 +15,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/

budget.json

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

case-study.md

@@ -0,0 +1,87 @@
+### SETUP
+
+добавил `webpack-bundle-analyzer` в devDependencies
+и включил плагин в процесс сборки (development.js)
+
+```js
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
+environment.plugins.append(
+  'BundleAnalyzer',
+  new BundleAnalyzerPlugin({
+    analyzerMode: 'static',
+    openAnalyzer: true,
+  }),
+);
+```
+
+выполнил анализ исходной версии
+![Alt text](/first_bundler_check.jpg?raw=true 'Initial')
+vendor.js -> 1.35mb
+
+запустил sitespeed.io
+
+```shell script
+docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://host.docker.internal:3000/ -n 1 --budget.configPath budget.json
+```
+
+проверка фейлится
+
+```shell script
+Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 3.2 MB max limit 459.0 KB
+```
+
+закомментировал proChart.js
+
+```shell script
+Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 521.9 KB max limit 459.0 KB
+```
+
+объем js сильно уменьшился но в бюджеты еще не влазит (но близко)
+
+раскомментировал proChart.js но убрал chart.js и moment.js из vendor.js (environment.js)
+
+```js
+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 &&
+        module.context.indexOf('moment') === -1 &&
+        module.context.indexOf('chart.js') === -1
+      );
+    },
+  }),
+);
+```
+
+![Alt text](/second_bundler_check.jpg?raw=true 'Optimized')
+
+```shell script
+Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 634.4 KB max limit 459.0 KB
+```
+
+бюджет все еще фейлится, но такой результат меня устраивает, я подниу бюджет до 650kb
+
+добавил sitespeed проверку в контур ci
+
+```yaml
+name: CI
+
+on: [push]
+
+jobs:
+  build-app:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: js budget check
+        uses: docker://sitespeedio/sitespeed.io:latest
+        with:
+          args: https://8b1b-2a02-a310-c25a-f500-a479-5be6-50d3-1088.ngrok.io  -n 1 --budget.configPath ./budget.json
+```

config/webpack/development.js

@@ -1,4 +1,15 @@
 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;

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - db
     environment:
       RAILS_ENV: development
-      DATABASE_URL: postgres://postgres:mysecretpassword@db:5432/postgres
+      DATABASE_URL: postgres://postgres:password@db:5432/postgres
       YARN_INTEGRITY_ENABLED: "false"
     volumes:
       - .:/usr/src/app
@@ -24,6 +24,8 @@ services:
     <<: *rails_base
     command: ./bin/webpack-dev-server
   db:
-    image: postgres
+    image: postgres:9.6-alpine
     ports:
     - "5432:5432"
+    environment:
+      POSTGRES_PASSWORD: password

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": {