[Vue] Chunk UMD JavaScript into a set of asynchronously loaded files (#18761)

* proof of concept for chunking UMD JavaScript into a set of files that are loaded asynchronously

* take into account alternative plugin directories

* make chunk count and load umds individually configurable (undocumented config) and get to work

* fix a bug and add chunk JS sizes to output of development:compute-js-asset-size

* document

* fill out TODO documentation

* make sure cache buster is added to chunk script srcs

* add some checks in case a chunk does not exist on disk (happens during some tests)

* use realpath on test PIWIK_INCLUDE_PATH so search/replace on paths for relative path will work

* add integration test and get to pass

* fix for when disable_merged_assets=1

* fix condition

* fix ui test failure

* update screenshot

Co-authored-by: sgiehl <stefan@matomo.org>

1 files changed, 54 insertions, 10 deletions

diff --git a/plugins/CoreConsole/Commands/ComputeJsAssetSize.php b/plugins/CoreConsole/Commands/ComputeJsAssetSize.php
index eb981be60e..9118d51abf 100644
--- a/plugins/CoreConsole/Commands/ComputeJsAssetSize.php
+++ b/plugins/CoreConsole/Commands/ComputeJsAssetSize.php
@@ -10,6 +10,7 @@ namespace Piwik\Plugins\CoreConsole\Commands;
 
 use Piwik\AssetManager;
 use Piwik\Common;
+use Piwik\Config;
 use Piwik\Development;
 use Piwik\Metrics\Formatter;
 use Piwik\Piwik;
@@ -18,6 +19,7 @@ use Piwik\Plugin\ConsoleCommand;
 use Piwik\Plugin\Manager;
 use Piwik\ProxyHttp;
 use Piwik\SettingsPiwik;
+use Piwik\Theme;
 use Symfony\Component\Console\Helper\Table;
 use Symfony\Component\Console\Input\InputInterface;
 use Symfony\Component\Console\Input\InputOption;
@@ -25,6 +27,8 @@ use Symfony\Component\Console\Output\OutputInterface;
 
 class ComputeJsAssetSize extends ConsoleCommand
 {
+    private $totals = [];
+
     protected function configure()
     {
         $this->setName('development:compute-js-asset-size');
@@ -51,19 +55,21 @@ class ComputeJsAssetSize extends ConsoleCommand
 
         $output->writeln("Building and printing sizes of built JS assets...");
 
+        $fetcher = $this->makeUmdFetcher();
+
         if ($excludeAngular) {
             $this->excludeAngular($output);
         }
 
         $this->deleteMergedAssets();
-        $this->buildAssets();
+        $this->buildAssets($fetcher);
 
         $output->writeln("");
 
         $this->printCurrentGitHashAndBranch($output, $excludeAngular, $plugin);
 
         $output->writeln("");
-        $this->printFilesizes($output);
+        $this->printFilesizes($fetcher, $output);
 
         if (!$noDelete) {
             $this->deleteMergedAssets();
@@ -197,10 +203,15 @@ class ComputeJsAssetSize extends ConsoleCommand
         });
     }
 
-    private function buildAssets()
+    private function buildAssets(AssetManager\UIAssetFetcher\PluginUmdAssetFetcher $fetcher)
     {
         AssetManager::getInstance()->getMergedCoreJavaScript();
         AssetManager::getInstance()->getMergedNonCoreJavaScript();
+
+        $chunks = $fetcher->getChunkFiles();
+        foreach ($chunks as $chunk) {
+            AssetManager::getInstance()->getMergedJavaScriptChunk($chunk->getChunkName());
+        }
     }
 
     private function deleteMergedAssets()
@@ -208,26 +219,40 @@ class ComputeJsAssetSize extends ConsoleCommand
         AssetManager::getInstance()->removeMergedAssets();
     }
 
-    private function printFilesizes(OutputInterface $output)
+    private function printFilesizes(AssetManager\UIAssetFetcher\PluginUmdAssetFetcher $fetcher, OutputInterface $output)
     {
         $fileSizes = [];
 
         $mergedCore = AssetManager::getInstance()->getMergedCoreJavaScript();
-        $fileSizes[] = [$mergedCore->getRelativeLocation(), $this->getFileSize($mergedCore->getAbsoluteLocation()), $this->getGzippedFileSize($mergedCore->getAbsoluteLocation())];
+        $fileSizes[] = $this->getFileSizeRow($mergedCore);
 
         $mergedNonCore = AssetManager::getInstance()->getMergedNonCoreJavaScript();
-        $fileSizes[] = [$mergedNonCore->getRelativeLocation(), $this->getFileSize($mergedNonCore->getAbsoluteLocation()), $this->getGzippedFileSize($mergedNonCore->getAbsoluteLocation())];
+        $fileSizes[] = $this->getFileSizeRow($mergedNonCore);
+
+        $chunks = $fetcher->getChunkFiles();
+        foreach ($chunks as $chunk) {
+            $chunkAsset = AssetManager::getInstance()->getMergedJavaScriptChunk($chunk->getChunkName());
+            $fileSizes[] = $this->getFileSizeRow($chunkAsset);
+        }
+
+        $fileSizes[] = [];
+        $fileSizes[] = ['Total', $this->getFormattedSize($this->totals['merged']), $this->getFormattedSize($this->totals['gzip'])];
 
         $table = new Table($output);
         $table->setHeaders(['File', 'Size', 'Size (gzipped)'])->setRows($fileSizes);
         $table->render();
     }
 
-    private function getFileSize($fileLocation)
+    private function getFileSize($fileLocation, $type)
     {
-        $formatter = new Formatter();
-
         $size = filesize($fileLocation);
+        $this->totals[$type] = ($this->totals[$type] ?? 0) + $size;
+        return $this->getFormattedSize($size);
+    }
+
+    private function getFormattedSize($size)
+    {
+        $formatter = new Formatter();
         $size = $formatter->getPrettySizeFromBytes($size, 'K', 2);
         return $size;
     }
@@ -250,7 +275,7 @@ class ComputeJsAssetSize extends ConsoleCommand
 
         $compressedPath = dirname($path) . '/' . basename($path) . '.gz';
         file_put_contents($compressedPath, $data);
-        return $this->getFileSize($compressedPath);
+        return $this->getFileSize($compressedPath, 'gzip');
     }
 
     private function printCurrentGitHashAndBranch(OutputInterface $output, $excludeAngular, $plugin = null)
@@ -271,4 +296,23 @@ class ComputeJsAssetSize extends ConsoleCommand
         $output->writeln("<info>$branchName ($lastCommit)$pluginSuffix</info> <comment>"
             . ($excludeAngular ? '(without angularjs)' : '') . "</comment>");
     }
+
+    private function makeUmdFetcher()
+    {
+        $plugins = Manager::getInstance()->getPluginsLoadedAndActivated();
+        $pluginNames = array_map(function ($p) { return $p->getPluginName(); }, $plugins);
+
+        $theme = Manager::getInstance()->getThemeEnabled();
+        if (!empty($theme)) {
+            $theme = new Theme();
+        }
+
+        $fetcher = new AssetManager\UIAssetFetcher\PluginUmdAssetFetcher($pluginNames, $theme, null);
+        return $fetcher;
+    }
+
+    private function getFileSizeRow(AssetManager\UIAsset $asset)
+    {
+        return [$asset->getRelativeLocation(), $this->getFileSize($asset->getAbsoluteLocation(), 'merged'), $this->getGzippedFileSize($asset->getAbsoluteLocation())];
+    }
 }