Refactor: bundle script start rework

packages/docs/.gitignore

@@ -21,3 +21,5 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+tree-shaking.md

packages/docs/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "yarn build:analysis && vue-cli-service serve",
+    "serve": "yarn build:analysis --use-cache && vue-cli-service serve",
     "build": "yarn build:analysis && vue-cli-service build",
     "build:ci": "yarn build:analysis && vue-cli-service build",
-    "build:analysis": "npx lerna run build:bundle-analysis --scope=sandbox",
+    "build:analysis": "yarn workspace sandbox build:analysis ../docs/src/page-configs/getting-started/tree-shaking",
     "lint": "vue-cli-service lint",
     "lint:style": "stylelint '**/*.{vue,html,css,scss}' --fix",
     "test:unit": "vue-cli-service test:unit",

packages/docs/src/page-configs/getting-started/tree-shaking/page-config.ts

@@ -1,7 +1,7 @@
 import { ApiDocsBlock } from '@/types/configTypes'
 import { PageGenerationHelper } from '@/helpers/DocsHelper'
 import { treeShakingExample, cssCodeSplit } from './code-examples'
-import bundleSizeData from 'sandbox/tree-shaking.md'
+import bundleSizeData from './tree-shaking.md'
 
 const block = new PageGenerationHelper(__dirname)
 

packages/sandbox/.gitignore

@@ -4,6 +4,5 @@ dist
 dist-ssr
 *.local
 package-lock.json
-bundle-sizes.js
-dev-tree-shaking.md
-tree-shaking.md
+analysis/*
+!analysis/.keep

packages/sandbox/README.md

@@ -34,4 +34,10 @@ Tests only can guarantee that tree-shaking is working.
 
 > Before build, please, check how project runs using `dev:vite`, `dev:vue-cli`, `serve:vite`, `server:vue-cli` before release.
 
-Later we can write some e2e tests
+Later we can write some e2e tests
+
+
+### Analysis
+
+`yarn build:analysis` makes build with tree-shaking.md file, where store information about bundle sizes
+use `yarn build:analysis --use-cache` if you want to generated tree-shaking.md only if it doesn't exists already.

packages/sandbox/configs/vite/common-config.ts

@@ -21,7 +21,7 @@ const visualizerPlugin = visualizer({
 
 export default function createViteConfig (type: BuildType) {
   const onAnalysis = async (analysisObject: AnalysisObject) => {
-    appendFileSync('./bundle-sizes.js', `export const ${camelCase(type)} = ${analysisObject.bundleSize}\n`)
+    appendFileSync('./analysis/bundle-sizes.js', `export const ${camelCase(type)} = ${analysisObject.bundleSize}\n`)
   }
   const analyzerPlugin = analyzer({ onAnalysis, stdout: true }) as PluginOption
 
@@ -47,6 +47,12 @@ export default function createViteConfig (type: BuildType) {
       },
     },
 
+    resolve: {
+      alias: {
+        'vuestic-ui': '../../node_modules/vuestic-ui'
+      },
+    },
+
     plugins: [vue(), isBase ? visualizerPlugin : analyzerPlugin],
   })
 }

packages/sandbox/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "rm -rf ./dist && yarn build:vite && yarn build:vue-cli && yarn build:nuxt",
     "build:vite": "vue-tsc --noEmit && vite build --config ./configs/vite/vite.base.ts",
-    "build:bundle-analysis": "tsx ./scripts/bundle-analysis.ts",
+    "build:analysis": "tsx ./scripts/bundle-analysis.ts",
     "build:vue-cli": "vue-cli-service build",
     "build:nuxt": "nuxt build",
     "dev:vite": "vite",
@@ -31,7 +31,7 @@
     "@vitejs/plugin-vue": "^1.3.0",
     "@vue/test-utils": "^2.0.2",
     "lodash": "^4.17.21",
-    "nuxt": "3.0.0-rc.8",
+    "nuxt": "3.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "sass": "^1.54.4",
     "serve": "^12.0.0",
@@ -45,5 +45,8 @@
     "webpack": "5",
     "webpack-cli": "^4.9.2",
     "when-dependencies-installed": "^1.0.0"
+  },
+  "workspaces": {
+    "nohoist": ["vite"]
   }
 }

packages/sandbox/scripts/bundle-analysis.ts

@@ -1,25 +1,38 @@
 import { $ } from 'deploy/execute'
-import { existsSync, rmSync, writeFileSync } from 'fs'
+import { existsSync, rmSync, writeFileSync, mkdirSync, openSync } from 'fs'
+import * as process from 'process'
 
 (async () => {
+  const isFullAnalysis = process.argv.includes('full')
+  const forceRebuild = !process.argv.includes('--use-cache')
+  const outputDir = process.argv.find((arg) => arg.startsWith('./') || arg.startsWith('../'))
+
   const distPath = './dist'
   if (existsSync(distPath)) {
     rmSync(distPath, { recursive: true })
   }
 
-  const bundleSizesPath = './bundle-sizes.js'
-  if (existsSync(bundleSizesPath)) {
-    rmSync(bundleSizesPath)
+  const analyticsStorePath = './analysis'
+  if (!existsSync(analyticsStorePath)) {
+    mkdirSync(analyticsStorePath, { recursive: true })
+    openSync(`${analyticsStorePath}/.keep`, 'a')
   }
 
-  await Promise.all([
-    $('vite build --config ./configs/vite/vite.empty.ts', { successMessage: 'Empty config was built.' }),
-    $('vite build --config ./configs/vite/vite.button.ts', { successMessage: 'Config with button was built.' }),
-    $('vite build --config ./configs/vite/vite.full.ts', { successMessage: 'Full config was built.' }),
-    $('vite build --config ./configs/vite/vite.button-select.ts', { successMessage: 'Config with button and select was built.' }),
-  ])
+  const bundleSizesCachePath = `./${analyticsStorePath}/bundle-sizes.js`
+  if ((forceRebuild) && existsSync(bundleSizesCachePath)) {
+    rmSync(bundleSizesCachePath)
+  }
 
-  if (existsSync(bundleSizesPath)) {
+  if (forceRebuild || !existsSync(bundleSizesCachePath)) {
+    await Promise.all([
+      $('vite build --config ./configs/vite/vite.empty.ts', { successMessage: 'Empty config was built.' }),
+      $('vite build --config ./configs/vite/vite.button.ts', { successMessage: 'Config with button was built.' }),
+      $('vite build --config ./configs/vite/vite.full.ts', { successMessage: 'Full config was built.' }),
+      $('vite build --config ./configs/vite/vite.button-select.ts', { successMessage: 'Config with button and select was built.' }),
+    ])
+  }
+
+  if (existsSync(bundleSizesCachePath)) {
     const VUETIFY_VERSION = '3.0.3'
     const VUETIFY_FULL_SIZE = 781
     const VUETIFY_BUTTON_SIZE = 112
@@ -29,32 +42,37 @@ import { existsSync, rmSync, writeFileSync } from 'fs'
     const NAIVE_BUTTON_SIZE = 181
     const NAIVE_BUTTON_SELECT_SIZE = 607
 
-    const bundleSizes = await (async () => await require('../bundle-sizes.js'))()
+    const bundleSizes = await (async () => await require('../analysis/bundle-sizes.js'))()
     const { empty, button, buttonSelect, full } = bundleSizes
 
+    const baseOutputPath = outputDir || analyticsStorePath
     const getOutputBundleSize = (v: number) => Math.trunc((v - empty) / 1000)
 
-    const mdFilePath = './tree-shaking.md'
+    const mdFilePath = `${baseOutputPath}/tree-shaking.md`
     writeFileSync(mdFilePath, `
 | Bundle                     | Vuestic UI                                |
 | -------------------------- | :---------------------------------------: |
 | Full                       | ~ ${getOutputBundleSize(full)} Kb         |
 | Core + VaButton            | ~ ${getOutputBundleSize(button)} Kb       |
 | Core + VaButton + VaSelect | ~ ${getOutputBundleSize(buttonSelect)} Kb |
     `)
+    console.warn(`Result was successfully written to ${mdFilePath}.`)
 
-    const devMdFilePath = './dev-tree-shaking.md'
-    writeFileSync(devMdFilePath, `
+    if (isFullAnalysis) {
+      const devMdFilePath = `${baseOutputPath}/dev-tree-shaking.md`
+      writeFileSync(devMdFilePath, `
 | Bundle                 | Vuestic UI                                | Vuetify UI (${VUETIFY_VERSION}) | Naive UI (${NAIVE_VERSION}) |
 | ---------------------- | :---------------------------------------: | :-----------------------------: | :-------------------------: |
 | Full                   | ~ ${getOutputBundleSize(full)} Kb         | ~ ${VUETIFY_FULL_SIZE} Kb       | ~ ${NAIVE_FULL_SIZE} Kb     |
 | Core + Button          | ~ ${getOutputBundleSize(button)} Kb       | ~ ${VUETIFY_BUTTON_SIZE} Kb     | ~ ${NAIVE_BUTTON_SIZE} Kb   |
 | Core + Button + Select | ~ ${getOutputBundleSize(buttonSelect)} Kb | ~ ${VUETIFY_BUTTON_SELECT_SIZE} Kb | ~ ${NAIVE_BUTTON_SELECT_SIZE} Kb |
     `)
 
-    console.warn(`Result was successfully written to ${mdFilePath} and ${devMdFilePath}.`)
+      console.warn(`Result was successfully written to ${devMdFilePath}.`)
+    }
+
     return
   }
 
-  console.warn(`${bundleSizesPath} file wasn't found. Bundle size analysis was terminated.`)
+  console.warn(`${bundleSizesCachePath} file wasn't found. Bundle size analysis was terminated.`)
 })()