diff options
author | dizzy <diosmosis@users.noreply.github.com> | 2022-03-04 19:35:44 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-03-04 19:35:44 +0300 |
commit | b774954679f99ef190b9ef71043529563f764946 (patch) | |
tree | acf7041e5865c57841fc09e61369a5c9c8c52385 /plugins/CoreConsole | |
parent | da4fa4175f7cef7cd93d600487fadad34330468a (diff) |
[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>
Diffstat (limited to 'plugins/CoreConsole')
-rw-r--r-- | plugins/CoreConsole/Commands/ComputeJsAssetSize.php | 64 |
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())]; + } } |