Skip to content

Commit 9ebfc71

Browse files
committed
task 6
1 parent ee573e0 commit 9ebfc71

12 files changed

+134
-27
lines changed

.github/workflows/master.yml

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
name: CI
2+
3+
on: [push]
4+
5+
jobs:
6+
build-app:
7+
runs-on: ubuntu-latest
8+
9+
steps:
10+
- uses: actions/checkout@v2
11+
- name: js budget check
12+
uses: docker://sitespeedio/sitespeed.io:latest
13+
with:
14+
args: https://8b1b-2a02-a310-c25a-f500-a479-5be6-50d3-1088.ngrok.io -n 1 --budget.configPath ./budget.json

Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ FROM ruby:2.6.1
22

33
# Make nodejs and yarn as dependencies
44
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
5-
RUN curl -sL https://deb.nodesource.com/setup_8.x | bash
5+
RUN curl -sL https://deb.nodesource.com/setup_16.x | bash
66
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
77

88
# Install dependencies and perform clean-up

Gemfile

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ end
1616
gem "actionpack-action_caching", "~> 1.2"
1717
gem "active_record_union", "~> 1.3"
1818
gem "acts-as-taggable-on", "~> 5.0"
19-
gem "acts_as_follower", github: "thepracticaldev/acts_as_follower", branch: "master"
19+
gem "acts_as_follower", github: "tcocca/acts_as_follower", branch: "master"
2020
gem "addressable", "~> 2.5", ">= 2.5.2"
2121
gem "administrate", "~> 0.11"
2222
gem "ahoy_email", "~> 0.5"
@@ -122,7 +122,7 @@ group :development, :test do
122122
gem "derailed", "~> 0.1"
123123
gem "erb_lint", "~> 0.0", require: false
124124
gem "faker", git: "https://github.com/stympy/faker.git", branch: "master"
125-
gem "fix-db-schema-conflicts", github: "thepracticaldev/fix-db-schema-conflicts", branch: "master"
125+
gem "fix-db-schema-conflicts", github: "jakeonrails/fix-db-schema-conflicts", branch: "master"
126126
gem "memory_profiler", "~> 0.9"
127127
gem "parallel_tests", "~> 2.27"
128128
gem "pry-byebug", "~> 3.7"

Gemfile.lock

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
GIT
2+
remote: https://github.com/jakeonrails/fix-db-schema-conflicts.git
3+
revision: 1e94f518503f1d1addd6ed052454efcbec0b3c6a
4+
branch: master
5+
specs:
6+
fix-db-schema-conflicts (3.1.0)
7+
rubocop (>= 0.38.0)
8+
19
GIT
210
remote: https://github.com/stympy/faker.git
311
revision: 9910aa58d92c018abab25d491191576fcc1a7707
@@ -7,21 +15,13 @@ GIT
715
i18n (>= 0.7)
816

917
GIT
10-
remote: https://github.com/thepracticaldev/acts_as_follower.git
11-
revision: 288690cd99bc470eaee493fce5bfa9fe23157692
18+
remote: https://github.com/tcocca/acts_as_follower.git
19+
revision: c5ac7b9601c4af01eb4d9112330b27be4d694ecc
1220
branch: master
1321
specs:
1422
acts_as_follower (0.2.1)
1523
activerecord (>= 4.0)
1624

17-
GIT
18-
remote: https://github.com/thepracticaldev/fix-db-schema-conflicts.git
19-
revision: 4172392392e1a8d907f7ab673cb5ddd9a4a31940
20-
branch: master
21-
specs:
22-
fix-db-schema-conflicts (3.0.2)
23-
rubocop (>= 0.38.0)
24-
2525
GEM
2626
remote: https://rubygems.org/
2727
remote: https://rails-assets.org/

budget.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"budget": {
3+
"transferSize": {
4+
"javascript": 650000
5+
}
6+
}
7+
}

case-study.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
### SETUP
2+
3+
добавил `webpack-bundle-analyzer` в devDependencies
4+
и включил плагин в процесс сборки (development.js)
5+
6+
```js
7+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
8+
.BundleAnalyzerPlugin;
9+
environment.plugins.append(
10+
'BundleAnalyzer',
11+
new BundleAnalyzerPlugin({
12+
analyzerMode: 'static',
13+
openAnalyzer: true,
14+
}),
15+
);
16+
```
17+
18+
выполнил анализ исходной версии
19+
![Alt text](/first_bundler_check.jpg?raw=true 'Initial')
20+
vendor.js -> 1.35mb
21+
22+
запустил sitespeed.io
23+
24+
```shell script
25+
docker run --privileged --rm -v "$(pwd)":/sitespeed.io sitespeedio/sitespeed.io http://host.docker.internal:3000/ -n 1 --budget.configPath budget.json
26+
```
27+
28+
проверка фейлится
29+
30+
```shell script
31+
Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 3.2 MB max limit 459.0 KB
32+
```
33+
34+
закомментировал proChart.js
35+
36+
```shell script
37+
Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 521.9 KB max limit 459.0 KB
38+
```
39+
40+
объем js сильно уменьшился но в бюджеты еще не влазит (но близко)
41+
42+
раскомментировал proChart.js но убрал chart.js и moment.js из vendor.js (environment.js)
43+
44+
```js
45+
environment.plugins.append(
46+
'CommonsChunkVendor',
47+
new webpack.optimize.CommonsChunkPlugin({
48+
name: 'vendor',
49+
minChunks: module => {
50+
// this assumes your vendor imports exist in the node_modules directory
51+
return (
52+
module.context &&
53+
module.context.indexOf('node_modules') !== -1 &&
54+
module.context.indexOf('moment') === -1 &&
55+
module.context.indexOf('chart.js') === -1
56+
);
57+
},
58+
}),
59+
);
60+
```
61+
62+
![Alt text](/second_bundler_check.jpg?raw=true 'Optimized')
63+
64+
```shell script
65+
Failing budget JavaScript Transfer Size for http://host.docker.internal:3000/ with value 634.4 KB max limit 459.0 KB
66+
```
67+
68+
бюджет все еще фейлится, но такой результат меня устраивает, я подниу бюджет до 650kb

config/webpack/development.js

+11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
const environment = require('./environment');
2+
3+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
4+
.BundleAnalyzerPlugin;
5+
environment.plugins.append(
6+
'BundleAnalyzer',
7+
new BundleAnalyzerPlugin({
8+
analyzerMode: 'static',
9+
openAnalyzer: true,
10+
}),
11+
);
12+
213
const config = environment.toWebpackConfig();
314

415
// For more information, see https://webpack.js.org/configuration/devtool/#devtool

config/webpack/environment.js

+16-12
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,31 @@
88

99
// module.exports = environment;
1010

11-
12-
const { environment } = require('@rails/webpacker')
13-
const webpack = require('webpack')
11+
const { environment } = require('@rails/webpacker');
12+
const webpack = require('webpack');
1413

1514
environment.plugins.append(
1615
'CommonsChunkVendor',
1716
new webpack.optimize.CommonsChunkPlugin({
1817
name: 'vendor',
19-
minChunks: (module) => {
18+
minChunks: module => {
2019
// this assumes your vendor imports exist in the node_modules directory
21-
return module.context && module.context.indexOf('node_modules') !== -1
22-
}
23-
})
24-
)
20+
return (
21+
module.context &&
22+
module.context.indexOf('node_modules') !== -1 &&
23+
module.context.indexOf('moment') === -1 &&
24+
module.context.indexOf('chart.js') === -1
25+
);
26+
},
27+
}),
28+
);
2529

2630
environment.plugins.append(
2731
'CommonsChunkManifest',
2832
new webpack.optimize.CommonsChunkPlugin({
2933
name: 'manifest',
30-
minChunks: Infinity
31-
})
32-
)
34+
minChunks: Infinity,
35+
}),
36+
);
3337

34-
module.exports = environment
38+
module.exports = environment;

docker-compose.yml

+4-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ services:
1010
- db
1111
environment:
1212
RAILS_ENV: development
13-
DATABASE_URL: postgres://postgres:mysecretpassword@db:5432/postgres
13+
DATABASE_URL: postgres://postgres:password@db:5432/postgres
1414
YARN_INTEGRITY_ENABLED: "false"
1515
volumes:
1616
- .:/usr/src/app
@@ -24,6 +24,8 @@ services:
2424
<<: *rails_base
2525
command: ./bin/webpack-dev-server
2626
db:
27-
image: postgres
27+
image: postgres:9.6-alpine
2828
ports:
2929
- "5432:5432"
30+
environment:
31+
POSTGRES_PASSWORD: password

first_bundler_check.jpg

123 KB
Loading

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"preact-render-spy": "^1.3.0",
8383
"preact-render-to-json": "^3.6.6",
8484
"prettier": "^1.16.4",
85+
"webpack-bundle-analyzer": "^4.5.0",
8586
"webpack-dev-server": "^2.11.3"
8687
},
8788
"dependencies": {

second_bundler_check.jpg

128 KB
Loading

0 commit comments

Comments
 (0)