Skip to content

Commit

Permalink
Add bundlesize
Browse files Browse the repository at this point in the history
  • Loading branch information
@willdurand
willdurand committed Aug 2, 2018
1 parent 30e7a0a commit c6265e8
Show file tree
Hide file tree
Showing 6 changed files with 353 additions and 102 deletions.
6 changes: 3 additions & 3 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@ cache:

# Allow to display job names on Travis-CI, see:
# https://github.com/travis-ci/travis-ci/issues/5898#issuecomment-362490313
script: yarn $COMMAND
script: FORCE_COLOR=0 yarn $COMMAND
jobs:
include:
# Test the build process.
- stage:
<<: *node-prod
env: ADDONS_FRONTEND_BUILD_ALL=1 COMMAND=build
env: COMMAND=build-ci
- stage:
<<: *node-next
env: ADDONS_FRONTEND_BUILD_ALL=1 COMMAND=build
env: COMMAND=build-all
# Run the unit/integration tests.
- stage:
<<: *node-prod
Expand Down
58 changes: 32 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,37 @@ The easiest way to manage multiple node versions in development is to use [nvm](

Here are some commands you can run:

| Command | Description |
| --------------------------- | ---------------------------------------------------------------------------------------------------------- |
| yarn amo | Start the dev server/proxy (for amo) using data from Docker |
| yarn amo:dev | Start the dev server/proxy (for amo) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn amo:no-proxy | Start the dev server without a proxy (for amo) using data from Docker |
| yarn amo:stage | Start the dev server/proxy (for amo) using data from the staging server (https://addons.allizom.org/) |
| yarn disco | Start the dev server (for Discovery Pane) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn flow | Run Flow. By default this checks for errors and exits |
| yarn flow:check | Explicitly check for Flow errors and exit |
| yarn flow:dev | Continuously check for Flow errors |
| yarn eslint | Lint the JS |
| yarn snyk | Run [snyk](#snyk) (without a command) |
| yarn snyk-ci | Run [snyk](#snyk) `test` and `monitor` |
| yarn snyk-wizard | Run [snyk](#snyk) `wizard` to fix an issue reported by snyk |
| yarn start-func-test-server | Start a Docker container for functional tests |
| yarn stylelint | Lint the SCSS |
| yarn lint | Run all the JS + SCSS linters |
| yarn prettier | Run [Prettier][] to automatically format the entire codebase |
| yarn prettier-dev | Run [Pretty-Quick][] to automatically compare and format modified source files against the master branch |
| yarn prettier-ci | Run [Prettier][] and fail if some code has been changed without being formatted |
| yarn version-check | Check you have the required dependencies |
| yarn test | Run all tests (Enters [jest][] in `--watch` mode) |
| yarn test-coverage | Run all tests and generate code coverage report (Enters [jest][] in `--watch` mode) |
| yarn test-coverage-once | Run all tests, generate code coverage report, then exit |
| yarn test-once | Run all tests, run all JS + SCSS linters, then exit |
| yarn test-ci | Run all continuous integration checks. This is only meant to run on TravisCI. |
| Command | Description |
| ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| yarn amo | Start the dev server/proxy (for amo) using data from Docker |
| yarn amo:dev | Start the dev server/proxy (for amo) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn amo:no-proxy | Start the dev server without a proxy (for amo) using data from Docker |
| yarn amo:stage | Start the dev server/proxy (for amo) using data from the staging server (https://addons.allizom.org/) |
| yarn build | Build an app specified with the `NODE_APP_INSTANCE` environment variable. |
| yarn build-all | Build all the applications. |
| yarn build-ci | Run the `build-all` and `bundlesize` npm scripts. |
| yarn bundlesize | Run [bundlesize][] to check the generated AMO bundle sizes. |
| [Building AMO is required first](#building-and-running-services). |
| yarn disco | Start the dev server (for Discovery Pane) using data from the dev server (https://addons-dev.allizom.org/) |
| yarn flow | Run Flow. By default this checks for errors and exits |
| yarn flow:check | Explicitly check for Flow errors and exit |
| yarn flow:dev | Continuously check for Flow errors |
| yarn eslint | Lint the JS |
| yarn snyk | Run [snyk](#snyk) (without a command) |
| yarn snyk-ci | Run [snyk](#snyk) `test` and `monitor` |
| yarn snyk-wizard | Run [snyk](#snyk) `wizard` to fix an issue reported by snyk |
| yarn start-func-test-server | Start a Docker container for functional tests |
| yarn stylelint | Lint the SCSS |
| yarn lint | Run all the JS + SCSS linters |
| yarn prettier | Run [Prettier][] to automatically format the entire codebase |
| yarn prettier-dev | Run [Pretty-Quick][] to automatically compare and format modified source files against the master branch |
| yarn prettier-ci | Run [Prettier][] and fail if some code has been changed without being formatted |
| yarn version-check | Check you have the required dependencies |
| yarn test | Run all tests (Enters [jest][] in `--watch` mode) |
| yarn test-coverage | Run all tests and generate code coverage report (Enters [jest][] in `--watch` mode) |
| yarn test-coverage-once | Run all tests, generate code coverage report, then exit |
| yarn test-once | Run all tests, run all JS + SCSS linters, then exit |
| yarn test-ci | Run all continuous integration checks. This is only meant to run on TravisCI. |

### Running tests

Expand Down Expand Up @@ -390,6 +395,7 @@ At a later date if we need to move things out into their own project we still ca
- Universal rendering via node
- Unit tests with high coverage (aiming for 100%)

[bundlesize]: https://github.com/siddharthkp/bundlesize
[jest]: https://facebook.github.io/jest/docs/en/getting-started.html
[prettier]: https://prettier.io/
[pretty-quick]: https://www.npmjs.com/package/pretty-quick
Expand Down
9 changes: 5 additions & 4 deletions bin/build-checks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ const config = require('config');

const appName = config.get('appName');

// Bail if appName isn't set unless explicitly enabled.
if (!appName && process.env.ADDONS_FRONTEND_BUILD_ALL !== '1') {
console.log(
chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
// Bail if appName isn't set.
if (!appName) {
console.log(chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
process.exit(1);
}

console.log(chalk.green(`\n---> BUILDING: ${appName}\n`));
111 changes: 53 additions & 58 deletions bin/build-locales
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,73 +16,68 @@ const chalk = require('chalk');
const toSource = require('tosource');
const oneLine = require('common-tags').oneLine;

const app = config.get('appName');
const buildAll = process.env.ADDONS_FRONTEND_BUILD_ALL === '1';
const appName = config.get('appName');

if (!app && !buildAll) {
console.log(
chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
if (!appName) {
console.log(chalk.red('Please specify the appName with NODE_APP_INSTANCE'));
process.exit(1);
}

const appsBuildList = buildAll ? config.get('validAppNames') : [app];
for (const appName of appsBuildList) {
const localeDir = path.join(__dirname, '../locale');
const poFiles = glob.sync(`${localeDir}/**/${appName}.po`);
const dest = path.join(__dirname, '../src/locale/');
const localeDir = path.join(__dirname, '../locale');
const poFiles = glob.sync(`${localeDir}/**/${appName}.po`);
const dest = path.join(__dirname, '../src/locale/');

poFiles.forEach((pofile) => {
const dir = path.dirname(pofile);
const subdir = path.dirname(dir);
const locale = path.basename(subdir);
const stem = path.basename(pofile, '.po');
const localeOutputFilePath = path.join(dest, locale, `${stem}.js`);
shelljs.mkdir('-p', path.join(dest, locale));
poFiles.forEach((pofile) => {
const dir = path.dirname(pofile);
const subdir = path.dirname(dir);
const locale = path.basename(subdir);
const stem = path.basename(pofile, '.po');
const localeOutputFilePath = path.join(dest, locale, `${stem}.js`);
shelljs.mkdir('-p', path.join(dest, locale));

const json = po2json.parseFileSync(pofile, {
stringify: true,
pretty: true,
format: 'jed1.x',
fuzzy: config.get('po2jsonFuzzyOutput'),
});
const localeObject = JSON.parse(json);
const json = po2json.parseFileSync(pofile, {
stringify: true,
pretty: true,
format: 'jed1.x',
fuzzy: config.get('po2jsonFuzzyOutput'),
});
const localeObject = JSON.parse(json);

// Add the moment locale JS into our locale file, if one is available and
// we're building for AMO (which is the only app that uses moment right
// now).
if (appName === 'amo') {
var defineLocale = null;
try {
const momentLocale = locale.replace('_', '-').toLowerCase();
const localeModulePath = `moment/locale/${momentLocale}`;
// Check for the locale first; if it doesn't exist we don't have
// a moment locale that matches.
fs.accessSync(`./node_modules/${localeModulePath}.js`);
// Add the moment locale JS into our locale file, if one is available and
// we're building for AMO (which is the only app that uses moment right
// now).
if (appName === 'amo') {
var defineLocale = null;
try {
const momentLocale = locale.replace('_', '-').toLowerCase();
const localeModulePath = `moment/locale/${momentLocale}`;
// Check for the locale first; if it doesn't exist we don't have
// a moment locale that matches.
fs.accessSync(`./node_modules/${localeModulePath}.js`);

// We're using `new Function()` here to create a function out of the
// raw code; this function won't be executed but will be written out by
// `toSource()` so that it can be used later (at runtime, by moment).
defineLocale = new Function(`
// By requiring this module, the new locale is defined and
// registered internally for moment.js
require('${localeModulePath}');`);
} catch (e) {
// We ignore missing locale errors for en_US as its moment's default
// locale so we don't need to provide a translation.
if (locale !== 'en_US') {
console.info(oneLine`No moment i18n available for ${locale};
consider adding one or creating a mapping.`);
}
// We're using `new Function()` here to create a function out of the
// raw code; this function won't be executed but will be written out by
// `toSource()` so that it can be used later (at runtime, by moment).
defineLocale = new Function(`
// By requiring this module, the new locale is defined and
// registered internally for moment.js
require('${localeModulePath}');`);
} catch (e) {
// We ignore missing locale errors for en_US as its moment's default
// locale so we don't need to provide a translation.
if (locale !== 'en_US') {
console.info(oneLine`No moment i18n available for ${locale};
consider adding one or creating a mapping.`);
}

localeObject._momentDefineLocale = defineLocale;
}

// This is used to force cache-busting of the JS via changing all locale JS.
// DO NOT REMOVE! See https://github.com/mozilla/addons-frontend/issues/4927
localeObject._cacheBust = '2018.08.02';
localeObject._momentDefineLocale = defineLocale;
}

fs.writeFileSync(
localeOutputFilePath, `module.exports = ${toSource(localeObject)}`);
});
}
// This is used to force cache-busting of the JS via changing all locale JS.
// DO NOT REMOVE! See https://github.com/mozilla/addons-frontend/issues/4927
localeObject._cacheBust = '2018.08.02';

fs.writeFileSync(
localeOutputFilePath, `module.exports = ${toSource(localeObject)}`);
});
19 changes: 17 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
"node": ">=6 <=8"
},
"scripts": {
"build": "bin/build-checks.js && better-npm-run build",
"build": "npm run clean && better-npm-run build",
"build-all": "npm run clean && NODE_APP_INSTANCE=amo better-npm-run build && NODE_APP_INSTANCE=disco better-npm-run build",
"build-check": "bin/build-checks.js",
"build-ci": "npm run build-all && npm run bundlesize",
"build-locales": "bin/build-locales",
"bundlesize": "bundlesize",
"extract-locales": "better-npm-run extract-locales",
"clean": "rimraf './dist/*!(.gitkeep)' './webpack-assets.json' './src/locale/**(!.gitkeep)'",
"amo": "better-npm-run amo",
Expand Down Expand Up @@ -41,7 +45,7 @@
},
"betterScripts": {
"build": {
"command": "npm run clean && npm run version-check && npm run build-locales && webpack --bail --verbose --display-error-details --progress --colors --config webpack.prod.config.babel.js",
"command": "npm run build-check && npm run version-check && npm run build-locales && webpack --bail --verbose --display-error-details --progress --colors --config webpack.prod.config.babel.js",
"env": {
"NODE_ICU_DATA": "./node_modules/full-icu",
"NODE_PATH": "./:./src"
Expand Down Expand Up @@ -237,6 +241,7 @@
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.24.1",
"bundle-loader": "^0.5.5",
"bundlesize": "^0.17.0",
"chalk": "^2.0.1",
"cheerio": "^1.0.0-rc.2",
"chokidar-cli": "^1.2.0",
Expand Down Expand Up @@ -297,5 +302,15 @@
"webpack-hot-middleware": "^2.18.0",
"webpack-subresource-integrity": "^1.0.0-rc.1"
},
"bundlesize": [
{
"path": "./dist/@(amo|disco)-!(i18n-)*.js",
"maxSize": "400 kB"
},
{
"path": "./dist/@(amo|disco)-i18n-*.js",
"maxSize": "25 kB"
}
],
"snyk": true
}
Loading

0 comments on commit c6265e8

Please sign in to comment.