optimization.ts 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. import TerserPlugin from 'terser-webpack-plugin';
  2. import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
  3. import type {Configuration} from 'webpack';
  4. const isProduction = process.env.NODE_ENV === 'production';
  5. const optimization: Configuration['optimization'] = {
  6. minimize: isProduction,
  7. minimizer: [
  8. new TerserPlugin({
  9. extractComments: false,
  10. terserOptions: {
  11. mangle: {
  12. safari10: true,
  13. },
  14. format: {
  15. comments: false,
  16. },
  17. },
  18. }),
  19. new CssMinimizerPlugin(),
  20. ],
  21. runtimeChunk: {
  22. name: 'webpackRuntime',
  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. name: 'defaultVendors',
  35. test: /[\\/]node_modules[\\/]/,
  36. priority: -10,
  37. reuseExistingChunk: true,
  38. },
  39. default: {
  40. name: 'defaultChunks',
  41. minChunks: 2,
  42. priority: -20,
  43. reuseExistingChunk: true,
  44. },
  45. reactVendors: {
  46. name: 'reactVendors',
  47. chunks: 'all',
  48. test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router|@remix-run|scheduler)/,
  49. priority: 10,
  50. reuseExistingChunk: true,
  51. },
  52. },
  53. },
  54. };
  55. export default optimization;