diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml new file mode 100644 index 0000000..3b8071a --- /dev/null +++ b/.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 diff --git a/Dockerfile b/Dockerfile index a95bcaf..20fed9b 100644 --- a/Dockerfile +++ b/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 diff --git a/Gemfile b/Gemfile index bf57e9a..b7b7c2b 100644 --- a/Gemfile +++ b/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" diff --git a/Gemfile.lock b/Gemfile.lock index 331bf9c..65edc47 100644 --- a/Gemfile.lock +++ b/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/ diff --git a/budget.json b/budget.json new file mode 100644 index 0000000..08d5be1 --- /dev/null +++ b/budget.json @@ -0,0 +1,7 @@ +{ + "budget": { + "transferSize": { + "javascript": 670000 + } + } +} diff --git a/case-study.md b/case-study.md new file mode 100644 index 0000000..1c26502 --- /dev/null +++ b/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 +``` diff --git a/config/webpack/development.js b/config/webpack/development.js index 009652d..f50d830 100644 --- a/config/webpack/development.js +++ b/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 diff --git a/config/webpack/environment.js b/config/webpack/environment.js index da47cd7..60df23e 100644 --- a/config/webpack/environment.js +++ b/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; diff --git a/docker-compose.yml b/docker-compose.yml index 96befe1..1516759 100644 --- a/docker-compose.yml +++ b/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 diff --git a/first_bundler_check.jpg b/first_bundler_check.jpg new file mode 100644 index 0000000..6881f3b Binary files /dev/null and b/first_bundler_check.jpg differ diff --git a/package.json b/package.json index 5532679..e60ed60 100644 --- a/package.json +++ b/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": { diff --git a/second_bundler_check.jpg b/second_bundler_check.jpg new file mode 100644 index 0000000..7905939 Binary files /dev/null and b/second_bundler_check.jpg differ