Speed up amp task loading by lazy-requiring large dependencies (#33376

)

build-system/compile/closure-compile.js

@@ -19,25 +19,26 @@ const compiler = require('@ampproject/google-closure-compiler');
 const vinylFs = require('vinyl-fs');
 const {cyan, red, yellow} = require('kleur/colors');
 const {getBabelCacheDir} = require('./pre-closure-babel');
-const {highlight} = require('cli-highlight');
 const {log, logWithoutTimestamp} = require('../common/logging');
 
 /**
- * Logs a closure compiler error message after formatting it into a more
- * readable form by dropping the plugin's logging prefix, normalizing paths,
- * emphasizing errors and warnings, and syntax highlighting the error text.
+ * Logs a closure compiler error message after syntax highlighting it and then
+ * formatting it into a more readable form by dropping the plugin's logging
+ * prefix, normalizing paths, and emphasizing errors and warnings.
  * @param {string} message
  */
 function logClosureCompilerError(message) {
   log(red('ERROR:'));
   const babelCacheDir = `${getBabelCacheDir()}/`;
   const loggingPrefix = /^.*?gulp-google-closure-compiler.*?: /;
-  const formattedMessage = message
+  const highlight = require('cli-highlight'); // Lazy-required to speed up task loading.
+  const highlightedMessage = highlight(message, {ignoreIllegals: true});
+  const formattedMessage = highlightedMessage
     .replace(loggingPrefix, '')
     .replace(new RegExp(babelCacheDir, 'g'), '')
     .replace(/ ERROR /g, red(' ERROR '))
     .replace(/ WARNING /g, yellow(' WARNING '));
-  logWithoutTimestamp(highlight(formattedMessage, {ignoreIllegals: true}));
+  logWithoutTimestamp(formattedMessage);
 }
 
 /**

build-system/compile/typescript.js

@@ -17,9 +17,6 @@
 
 const fs = require('fs-extra');
 const path = require('path');
-const ts = require('typescript');
-/** @type {*} */
-const tsickle = require('tsickle');
 const {log} = require('../common/logging');
 const {red} = require('kleur/colors');
 
@@ -31,7 +28,9 @@ const {red} = require('kleur/colors');
  * @param {string} srcFilename
  * @return {!Promise}
  */
-exports.transpileTs = async function (srcDir, srcFilename) {
+async function transpileTs(srcDir, srcFilename) {
+  const ts = require('typescript'); // Lazy-required to speed up task loading.
+  const tsickle = require('tsickle'); // Lazy-required to speed up task loading.
   const tsEntry = path.join(srcDir, srcFilename).replace(/\.js$/, '.ts');
   const tsConfig = ts.convertCompilerOptionsFromJson(
     {
@@ -86,4 +85,8 @@ exports.transpileTs = async function (srcDir, srcFilename) {
   if (diagnostics.length) {
     log(red('TSickle:'), tsickle.formatDiagnostics(diagnostics));
   }
+}
+
+module.exports = {
+  transpileTs,
 };

build-system/tasks/bundle-size/index.js

@@ -39,8 +39,6 @@ const {cyan, red, yellow} = require('kleur/colors');
 const {log, logWithoutTimestamp} = require('../../common/logging');
 const {report, NoTTYReport} = require('@ampproject/filesize');
 
-const requestPost = util.promisify(require('request').post);
-
 const filesizeConfigPath = require.resolve('./filesize.json');
 const fileGlobs = require(filesizeConfigPath).filesize.track;
 const normalizedRtvNumber = '1234567890123';
@@ -117,6 +115,7 @@ async function storeBundleSize() {
   const commitHash = gitCommitHash();
   log('Storing bundle sizes for commit', cyan(shortSha(commitHash)) + '...');
   try {
+    const requestPost = util.promisify(require('request').post); // Lazy-required to speed up task loading.
     const response = await requestPost({
       uri: url.resolve(
         bundleSizeAppBaseUrl,
@@ -147,6 +146,7 @@ async function skipBundleSize() {
       cyan(shortSha(commitHash)) + '...'
     );
     try {
+      const requestPost = util.promisify(require('request').post); // Lazy-required to speed up task loading.
       const response = await requestPost(
         url.resolve(
           bundleSizeAppBaseUrl,
@@ -184,6 +184,7 @@ async function reportBundleSize() {
       cyan(shortSha(mergeSha)) + '...'
     );
     try {
+      const requestPost = util.promisify(require('request').post); // Lazy-required to speed up task loading.
       const response = await requestPost({
         uri: url.resolve(
           bundleSizeAppBaseUrl,

build-system/tasks/css/jsify-css.js

@@ -15,7 +15,6 @@
  */
 'use strict';
 
-const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const fs = require('fs-extra');
 const postcss = require('postcss');
@@ -24,7 +23,7 @@ const {log} = require('../../common/logging');
 const {red} = require('kleur/colors');
 
 // NOTE: see https://github.com/ai/browserslist#queries for `browsers` list
-const cssprefixer = autoprefixer({
+const browsersList = {
   overrideBrowserslist: [
     'last 5 ChromeAndroid versions',
     'last 5 iOS versions',
@@ -34,7 +33,7 @@ const cssprefixer = autoprefixer({
     'last 2 OperaMobile versions',
     'last 2 OperaMini versions',
   ],
-});
+};
 
 const cssNanoDefaultOptions = {
   autoprefixer: false,
@@ -71,6 +70,8 @@ function transformCss(cssStr, opt_cssnano, opt_filename) {
     opt_cssnano
   );
   const cssnanoTransformer = cssnano({preset: ['default', cssnanoOptions]});
+  const autoprefixer = require('autoprefixer'); // Lazy-required to speed up task loading.
+  const cssprefixer = autoprefixer(browsersList);
   const transformers = [postcssImport, cssprefixer, cssnanoTransformer];
   return postcss.default(transformers).process(cssStr, {
     'from': opt_filename,

build-system/tasks/performance/copy-images.js

@@ -16,7 +16,6 @@
 
 const fs = require('fs');
 const {CONTROL, maybeCopyImageToCache, urlToCachePath} = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Lookup URL from cache. Inspect tags that could use images.
@@ -26,6 +25,7 @@ const {JSDOM} = require('jsdom');
 function copyImagesFromTags(url) {
   const cachePath = urlToCachePath(url, CONTROL);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = require('jsdom'); // Lazy-required to speed up task loading.
   const dom = new JSDOM(document);
 
   copyImagesFromAmpImg(url, dom);

build-system/tasks/performance/rewrite-analytics-tags.js

@@ -21,7 +21,6 @@ const {
   getLocalVendorConfig,
   urlToCachePath,
 } = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Return local vendor config.
@@ -65,6 +64,7 @@ async function maybeMergeAndRemoveVendorConfig(tag, script) {
 async function alterAnalyticsTags(url, version, extraUrlParams) {
   const cachePath = urlToCachePath(url, version);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = require('jsdom'); // Lazy-required to speed up task loading.
   const dom = new JSDOM(document);
 
   const analyticsTags = Array.from(

build-system/tasks/performance/rewrite-script-tags.js

@@ -28,7 +28,6 @@ const {
   getLocalPathFromExtension,
   urlToCachePath,
 } = require('./helpers');
-const {JSDOM} = require('jsdom');
 
 /**
  * Lookup URL from cache and rewrite URLs to build from working branch
@@ -38,6 +37,7 @@ const {JSDOM} = require('jsdom');
 async function useLocalScripts(url) {
   const cachePath = urlToCachePath(url, EXPERIMENT);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = require('jsdom'); // Lazy-required to speed up task loading.
   const dom = new JSDOM(document);
 
   const scripts = Array.from(dom.window.document.querySelectorAll('script'));
@@ -68,6 +68,7 @@ async function useLocalScripts(url) {
 async function useRemoteScripts(url) {
   const cachePath = urlToCachePath(url, CONTROL);
   const document = fs.readFileSync(cachePath);
+  const {JSDOM} = require('jsdom'); // Lazy-required to speed up task loading.
   const dom = new JSDOM(document);
 
   const scripts = Array.from(dom.window.document.querySelectorAll('script'));