build.js 3.0 KB

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