build.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  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 ? chalk.hex('#48c0a3') : isCss ? chalk.hex('#b0a4e3') : chalk.hex('#eacd76');
  20. if (isJs || isMedia || isCss) {
  21. if (!overstep) overstep = sizeNum > MAX_CHUNK_SIZE;
  22. list.push({
  23. path,
  24. size: sizeNum >= 1024 ? `${kbSize} KB` : `${sizeNum} B`,
  25. sizePen,
  26. pathPen,
  27. });
  28. }
  29. }
  30. const maxLength = list.reduce(function(pre, next) {
  31. return next.size.length > pre ? next.size.length : pre;
  32. }, 0);
  33. list.forEach(function({path, size, sizePen, pathPen}) {
  34. const afterSize = size.padEnd(maxLength + 2, ' ');
  35. console.log(sizePen(`Size: ${afterSize}`), pathPen(path));
  36. });
  37. if (overstep) {
  38. const varColor = '#177cb0';
  39. const pathColor = '#f00056';
  40. console.log();
  41. console.log();
  42. console.log(
  43. chalk.grey(
  44. `Some chunks are larger ${MAX_CHUNK_SIZE / 1024}KB after compilation. Consider:`,
  45. ),
  46. );
  47. console.log();
  48. console.log(
  49. chalk.hex(pathColor)(
  50. '1.Using dynamic import() to code-split the application',
  51. ),
  52. );
  53. console.log(
  54. chalk.hex(pathColor)('2.Adjust the prompt size by adjusting'
  55. + ` ${chalk.hex(varColor)('SWT_MAX_CHUNK_SIZE')}`
  56. + ` in ${chalk.white('packages/app/.env')}`),
  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(
  84. chalk.gray(`Compiled successfully in ${(time / 1000).toFixed(2)}s`),
  85. );
  86. console.log();
  87. printAssets(assets);
  88. console.log();
  89. });
  90. } catch (error) {
  91. errorLogger('Failed to compile');
  92. console.log();
  93. console.log(error.message);
  94. console.log();
  95. process.exit(1);
  96. }