I’ve been working on a semi overhaul and refactor of my application and have been trying to tackle ever increasing build times and file sizes. Here are some stats from my app.
- app.js
2,900KB - vendor.js
2,101KB - app.css
188KB - vendor.css
100KB - routes:
178 - components:
248 - models:
105 - browser list: ‘last 1 Chrome versions’, ‘last 1 Firefox versions’, ‘last 1 Safari versions’, ‘ie 11’
- i am on windows.
Output from GitHub - XAMPPRocky/tokei: Count your code, quickly.
-------------------------------------------------------------------------------
Language Files Lines Code Comments Blanks
-------------------------------------------------------------------------------
Batch 4 106 65 0 41
Handlebars 405 20318 20162 56 100
HTML 2 91 71 4 16
JavaScript 802 65290 39895 17945 7450
JSON 11 62795 62795 0 0
Markdown 3 1278 1278 0 0
Sass 51 5126 3904 399 823
Shell 2 24 7 11 6
SQL 7 3598 3001 299 298
SVG 204 1929 1868 59 2
Plain Text 6 150 150 0 0
XML 3 137 126 8 3
-------------------------------------------------------------------------------
Total 1500 160842 133322 18781 8739
My build time
Build successful (132604ms) – Serving on http://localhost:4200
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
SassCompiler (2) | 44162ms (22081 ms)
Babel: ember-attacher (2) | 18091ms (9045 ms)
Babel: ember-basic-dropdown (3) | 13974ms (4658 ms)
ember-auto-import-analyzer (4) | 8409ms (2102 ms)
Warm rebuild
file changed pods\components\portal\track\trip-list\template.hbs
Build successful (51802ms) – Serving on http://localhost:4200/skyrouter3/
Slowest Nodes (totalTime => 5% ) | Total (avg)
----------------------------------------------+---------------------
SassCompiler (2) | 46297ms (23148 ms)
My packages:
View Packages
"devDependencies": {
"@ember-intl/cp-validations": "^4.0.1",
"@ember/jquery": "^1.1.0",
"@ember/optional-features": "^1.3.0",
"@kockpit/ember-gantt": "^1.1.3",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap-sass": "^3.4.1",
"broccoli-asset-rev": "^3.0.0",
"corber": "^1.4.2",
"core-js": "^3.6.5",
"devtron": "^1.4.0",
"electron-forge": "^5.2.4",
"electron-prebuilt-compile": "4.0.0",
"ember-ajax": "^5.0.0",
"ember-attacher": "^1.1.1",
"ember-auto-import": "^1.5.3",
"ember-basic-dropdown": "^3.0.1",
"ember-bootstrap-datetimepicker": "1.1.0",
"ember-cli": "~3.14.0",
"ember-cli-active-link-wrapper": "0.5.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-autoprefixer": "^1.0.0",
"ember-cli-babel": "7.19.0",
"ember-cli-chart": "^3.6.0",
"ember-cli-content-security-policy": "^1.1.1",
"ember-cli-dependency-checker": "^3.2.0",
"ember-cli-document-title-northm": "^1.0.2",
"ember-cli-eslint": "^5.1.0",
"ember-cli-google-analytics": "1.5.0",
"ember-cli-htmlbars": "4.2.3",
"ember-cli-inject-live-reload": "^2.0.2",
"ember-cli-moment-shim": "3.7.1",
"ember-cli-notifications": "^6.2.0",
"ember-cli-pace": "0.1.0",
"ember-cli-sass": "^10.0.1",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "2.0.0",
"ember-cli-uglify": "^3.0.0",
"ember-cli-windows": "^2.1.6",
"ember-colpick": "1.0.0",
"ember-cordova-events": "^0.1.3",
"ember-cordova-splash": "^0.1.9",
"ember-cp-validations": "^4.0.0-beta.9",
"ember-data": "~3.12.6",
"ember-data-model-fragments": "^4.0.0",
"ember-debounced-input-helpers": "0.0.2",
"ember-electron": "^2.10.0",
"ember-export-application-global": "^2.0.1",
"ember-fetch": "^8.0.1",
"ember-flatpickr": "^2.15.4",
"ember-intl": "^4.3.0",
"ember-load-initializers": "^2.1.0",
"ember-local-storage": "^1.7.2",
"ember-math-helpers": "^2.14.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-power-select": "^4.0.0",
"ember-progress-bar": "^1.0.0",
"ember-qrcode": "0.0.4",
"ember-qunit": "^4.5.1",
"ember-radio-button": "^2.0.1",
"ember-resolver": "6.0.0",
"ember-route-action-helper": "2.0.8",
"ember-simple-auth": "^3.0.0",
"ember-sortable": "^2.1.3",
"ember-source": "~3.14.3",
"ember-tag-input": "^2.0.0",
"ember-truth-helpers": "~2.1.0",
"ember-wormhole": "^0.5.5",
"eonasdan-bootstrap-datetimepicker": "4.17.47",
"eslint-plugin-ember": "8.1.1",
"eslint-plugin-node": "11.1.0",
"font-awesome": "^4.7.0",
"intl-tel-input": "^16.0.15",
"ivy-tabs": "3.3.1",
"loader.js": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.28",
"node-sass": "^4.14.1",
"qunit-dom": "^1.1.0",
"sass": "^1.26.5"
},
"engines": {
"node": "8.* || >= 10.*"
},
"dependencies": {
"electron-compile": "^6.4.4",
"electron-protocol-serve": "^1.3.0",
"electron-squirrel-startup": "^1.0.0",
"whatwg-fetch": "^3.0.0"
},
View Packages (bower)
{
"name": "sky-router-3",
"dependencies": {
"google-infobox": "*",
"OverlappingMarkerSpiderfier": "*",
"pace": "Kilowhisky/pace#master",
"signalr": "~2.4.0",
"bootstrap-tokenfield": "~0.12.1",
"seiyria-bootstrap-slider": "~10.6.1",
"blanket": "~1.1.5",
"colpick": "2.0.2",
"qrcode": "^1.0.2"
},
"resolutions": {
"bootstrap": "~3.4.1"
}
}
View My ember-cli-build.js file
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const nodeSass = require('node-sass');
const IS_PROD = process.env.EMBER_ENV === 'production';
const IS_TEST = process.env.EMBER_ENV === 'test';
module.exports = function(defaults) {
let app = new EmberApp(defaults, {
// Add options here
fingerprint: {
exclude: ['fontawesome', 'favicon', 'apple-touch-icon', 'node-main.js', 'oms.min.js', 'assets/images/overlays/'],
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'json'],
generateAssetMap: true,
fingerprintAssetMap: true
},
flatpickr: {
theme: 'airbnb',
locales: ['es', 'pt']
},
storeConfigInMeta: false,
'ember-cli-babel': {
includePolyfill: IS_PROD
},
sassOptions: {
sourceMap: false,
implementation: nodeSass,
includePaths: [
'node_modules',
'bower_components'
]
},
hinting: IS_TEST,
tests: IS_TEST
});
// More imports here for files
return app.toTree();
};
I have created a GitHub - ember-cli/broccoli-viz: library to read/parse and produce various visualizations of broccoli. pdf file. It can be downloaded here: https://filebin.net/93wf2hvc4ej66ewc/build.0.pdf?t=9o02wpe2
I’ve been implementing every change i can think to try to bring down the build times and the file sizes, short of total restructure to engines. Took a number of the changes located here: Tips for improving build time of large apps - #4 by mattmcmanus and also have started taking the approach of in-boarding plugins where i can.
I recently made a change from ember-cli-less to ember-cli-sass an saw an absolutely huge increase in build times. But unfortunately i can’t go back.
I’m not sure what else i can do. Anything else i can do to address? I’ve attempted some things with SASS but by god is it slow.
