optimization.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. const TerserPlugin = require('terser-webpack-plugin');
  2. const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  3. const isProduction = process.env.NODE_ENV === 'production';
  4. const optimization = {
  5. minimize: isProduction,
  6. minimizer: [
  7. new TerserPlugin({
  8. minify: TerserPlugin.swcMinify,
  9. terserOptions: {
  10. compress: {
  11. unused: true,
  12. },
  13. mangle: true,
  14. format: {
  15. comments: false,
  16. },
  17. },
  18. }),
  19. new CssMinimizerPlugin(),
  20. ],
  21. runtimeChunk: {
  22. name: entrypoint => `runtime~${entrypoint.name}`,
  23. },
  24. splitChunks: {
  25. chunks: 'async',
  26. minSize: 20000,
  27. minRemainingSize: 0,
  28. minChunks: 1,
  29. maxAsyncRequests: 30,
  30. maxInitialRequests: 30,
  31. enforceSizeThreshold: 50000,
  32. cacheGroups: {
  33. defaultVendors: {
  34. test: /[\\/]node_modules[\\/]/,
  35. priority: -10,
  36. reuseExistingChunk: true,
  37. },
  38. default: {
  39. minChunks: 2,
  40. priority: -20,
  41. reuseExistingChunk: true,
  42. },
  43. reactVendors: {
  44. name: 'react-vendors',
  45. chunks: 'all',
  46. test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router|@remix-run|scheduler)/,
  47. priority: 10,
  48. reuseExistingChunk: true,
  49. },
  50. lottieVendors: {
  51. name: 'lottie',
  52. chunks: 'all',
  53. test: /[\\/]node_modules[\\/](lottie)/,
  54. priority: 10,
  55. reuseExistingChunk: true,
  56. },
  57. },
  58. },
  59. };
  60. module.exports = optimization;