build.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. const webpack = require('webpack');
  2. const chalk = require('chalk');
  3. const config = require('../config/webpack.config');
  4. const {clearConsole} = require('./utils');
  5. const {errorLogger} = require('./utils');
  6. const MAX_CHUNK_SIZE = Number(process.env.MAX_CHUNK_SIZE ?? 0);
  7. function printAssets(assets) {
  8. console.log('Packaging resource list:');
  9. console.log();
  10. const list = [];
  11. let overstep = false;
  12. for (const [path, size] of Object.entries(assets)) {
  13. const isJs = path.lastIndexOf('.js') === path.length - 3;
  14. const isCss = path.lastIndexOf('.css') === path.length - 4;
  15. const isMedia = path.includes('static/assets');
  16. const sizeNum = size.size();
  17. const kbSize = Math.ceil(sizeNum / 1024);
  18. const sizePen =
  19. sizeNum > MAX_CHUNK_SIZE
  20. ? chalk.hex('#ff2121').bold
  21. : chalk.hex('#0aa344');
  22. const pathPen = isJs
  23. ? chalk.hex('#48c0a3')
  24. : isCss
  25. ? chalk.hex('#b0a4e3')
  26. : chalk.hex('#eacd76');
  27. if (isJs || isMedia || isCss) {
  28. if (!overstep) overstep = sizeNum > MAX_CHUNK_SIZE;
  29. list.push({
  30. path,
  31. size: sizeNum >= 1024 ? `${kbSize} KB` : `${sizeNum} B`,
  32. sizePen,
  33. pathPen,
  34. });
  35. }
  36. }
  37. const maxLength = list.reduce(function (pre, next) {
  38. return next.size.length > pre ? next.size.length : pre;
  39. }, 0);
  40. list.forEach(function ({path, size, sizePen, pathPen}) {
  41. const afterSize = size.padEnd(maxLength + 2, ' ');
  42. console.log(sizePen(`Size: ${afterSize}`), pathPen(path));
  43. });
  44. if (overstep) {
  45. const varColor = '#177cb0';
  46. const pathColor = '#f00056';
  47. console.log();
  48. console.log();
  49. console.log(
  50. chalk.grey(
  51. `Some chunks are larger ${
  52. MAX_CHUNK_SIZE / 1024
  53. }KB after compilation. Consider:`,
  54. ),
  55. );
  56. console.log();
  57. console.log(
  58. chalk.hex(pathColor)(
  59. '1.Using dynamic import() to code-split the application',
  60. ),
  61. );
  62. console.log(
  63. chalk.hex(pathColor)(
  64. '2.Adjust the prompt size by adjusting' +
  65. ` ${chalk.hex(varColor)('SWT_MAX_CHUNK_SIZE')}` +
  66. ` in ${chalk.white('packages/app/.env')}`,
  67. ),
  68. );
  69. console.log(
  70. chalk.hex(pathColor)(
  71. `3.Modify ${chalk.hex(varColor)('splitChunks')} in ` +
  72. `${chalk.white('packages/webpack/config/optimization.js')}`,
  73. ),
  74. );
  75. }
  76. }
  77. try {
  78. const compiler = webpack(config);
  79. compiler.run(function (err, stats) {
  80. if (err) {
  81. errorLogger('Failed to compile');
  82. console.log();
  83. console.log(err.message);
  84. console.log();
  85. process.exit(1);
  86. }
  87. const {assets, startTime, endTime} = stats.compilation.assets;
  88. const time = endTime - startTime;
  89. clearConsole();
  90. console.log();
  91. console.log(chalk.green('Successfully 🤩'));
  92. console.log(
  93. chalk.gray(`Compiled successfully in ${(time / 1000).toFixed(2)}s`),
  94. );
  95. console.log();
  96. printAssets(assets);
  97. console.log();
  98. });
  99. } catch (error) {
  100. errorLogger('Failed to compile');
  101. console.log();
  102. console.log(error.message);
  103. console.log();
  104. process.exit(1);
  105. }