add build config, add PackingGenerateFilePlugin

Author: weizhiqimail

package.json

@@ -15,6 +15,7 @@
     "antd": "^4.12.3",
     "classnames": "^2.2.6",
     "connected-react-router": "^6.8.0",
+    "lodash": "^4.17.21",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
@@ -24,7 +25,7 @@
     "redux-logger": "^3.0.6",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0",
-    "typescript": "^4.1.3"
+    "typescript": "4.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.17",
@@ -59,6 +60,7 @@
     "html-webpack-plugin": "^5.2.0",
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
+    "lodash.isequalwith": "^4.4.0",
     "mini-css-extract-plugin": "^1.3.8",
     "postcss-loader": "^5.0.0",
     "prettier": "^2.2.1",

scripts/helper.js

@@ -35,7 +35,24 @@ function getProcessEnv() {
   return result;
 }
 
+function processSize(size) {
+  let idx = 0;
+  let sizeUnit = ['Byte', 'Kb', 'Mb', 'Gb'];
+  while (size > 1024) {
+    size = size / 1024;
+    idx++;
+  }
+
+  return {
+    size: parseFloat(Number(size).toFixed(2)),
+    unit: sizeUnit[idx],
+  };
+}
+
+
+
 module.exports = {
   getProcessEnv,
+  processSize,
 };
 

scripts/plugins/PackingGenerateFilePlugin.js

@@ -0,0 +1,18 @@
+const helper = require('../helper');
+
+class PackingGenerateFilePlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tap('PackingGenerateFilePlugin', (compilation) => {
+      let assets = compilation.assets;
+      let contentList = [];
+      // statObj.size() 的单位是 bit
+      Object.entries(assets).forEach(([filename, statObj]) => {
+        const { size, unit } = helper.processSize(statObj.size())
+        contentList.push({filename, size: `${size}${unit}` });
+      });
+      console.table(contentList);
+    });
+  }
+}
+
+module.exports = PackingGenerateFilePlugin;

scripts/webpack.config.js

@@ -34,6 +34,9 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({'process.env': JSON.stringify(envObj)}),
     new webpack.EnvironmentPlugin(envObj),
-  ]
+  ],
+
+  stats: 'errors-only',
+
 };
 

scripts/webpack.config.prod.js

@@ -6,6 +6,8 @@ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+const PackingGenerateFilePlugin = require('./plugins/PackingGenerateFilePlugin');
+
 const baseConfig = require('./webpack.config');
 const pkg = require('../package.json');
 
@@ -16,7 +18,7 @@ module.exports = merge(baseConfig, {
 
   output: {
     path: path.resolve(__dirname, '../dist'),
-    filename: 'js/main-[name]-[contenthash:8].js'
+    filename: 'js/[contenthash:8].js'
   },
 
   devServer: {
@@ -80,6 +82,7 @@ module.exports = merge(baseConfig, {
       chunkFilename: 'css/[name].[contenthash:8].chunk.css',
     }),
     new webpack.PrefetchPlugin('react'),
+    new PackingGenerateFilePlugin()
   ],
 
   optimization: {
@@ -105,6 +108,8 @@ module.exports = merge(baseConfig, {
             ascii_only: true,
           },
         },
+        parallel: true,
+        extractComments: false,
       }),
     ],
     splitChunks: {
@@ -115,5 +120,4 @@ module.exports = merge(baseConfig, {
       name: entrypoint => `runtime-${entrypoint.name}`,
     },
   }
-
 });

yarn.lock

@@ -3929,7 +3929,12 @@ lodash-es@^4.2.1:
   resolved "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=
 
-lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.2.1:
+lodash.isequalwith@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/lodash.isequalwith/download/lodash.isequalwith-4.4.0.tgz#266726ddd528f854f21f4ea98a065606e0fbc6b0"
+  integrity sha1-Jmcm3dUo+FTyH06pigZWBuD7xrA=
+
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.2.1:
   version "4.17.21"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835860585&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=
@@ -6178,10 +6183,10 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@^4.1.3:
-  version "4.1.5"
-  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.1.5.tgz?cache=0&sync_timestamp=1613978455569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.1.5.tgz#123a3b214aaff3be32926f0d8f1f6e704eb89a72"
-  integrity sha1-Ejo7IUqv874ykm8Njx9ucE64mnI=
+typescript@4.1.3:
+  version "4.1.3"
+  resolved "https://registry.npm.taobao.org/typescript/download/typescript-4.1.3.tgz?cache=0&sync_timestamp=1613978455569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftypescript%2Fdownload%2Ftypescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha1-UZ1YK9lMugz4k0x9joRn5HP1O7c=
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"