📦 Webpack Code-Spiltting and Tree Shaking

Added Code Spilting optimizations/splitChunks and Tree Shaking with Terser Plugin

Author: tushar1998

README.md

@@ -31,9 +31,7 @@ This Template is for building React efficient React Frontend Apps. It uses moder
      - .env.local - varialbles with secrets (should include in .gitignore)
      - .env.development - variables required while development
      - .env.production - variables required for production
+- Code Spiltting : 🖖 Webpack Split Chunks (basic)
+- Tree Shaking : 🌲 Webpack Terser Plugin (basic)
+- Clone Branch react-router if you want to use [react-router-dom](https://reactrouter.com/)
 
- - Clone Branch react-router if you want to use [react-router-dom](https://reactrouter.com/)
-# Future Implementations
- - Code Spiltting
- - Tree Shaking
- - cross-env

package.json

@@ -7,9 +7,8 @@
   "license": "ISC",
   "scripts": {
     "start": "webpack serve --config webpack/webpack.config.js --env env=dev",
-    "build": "yarn clean && webpack --config webpack/webpack.config.js --env env=prod",
-    "analyze": "yarn clean && webpack --config webpack/webpack.config.js --env env=prod --analyze",
-    "clean": "rimraf build",
+    "build": "webpack --config webpack/webpack.config.js --env env=prod",
+    "analyze": "webpack --config webpack/webpack.config.js --env env=prod --analyze",
     "lint": "eslint --fix \"./src/**/*.{js,jsx,ts,tsx,scss,css,json}\"",
     "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,scss,css,json,md}\"",
     "test": "jest -c jest.config.ts",
@@ -45,7 +44,6 @@
     "html-webpack-plugin": "^5.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
     "style-loader": "^2.0.0",
     "styled-components": "^5.3.0",
     "typescript": "^4.2.4",

webpack/webpack.common.js

@@ -32,6 +32,7 @@ module.exports = {
       utils: path.resolve(__dirname, '..', 'src', 'utils'),
     },
   },
+  devServer: { port: 3000 },
   module: {
     rules: [
       {
@@ -63,8 +64,14 @@ module.exports = {
     ],
   },
   output: {
+    clean: true,
     path: path.resolve(__dirname, '..', './build'),
-    filename: 'bundle.js',
+    filename: '[name].[chunkhash].js',
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
   },
   plugins: [
     new HtmlWebpackPlugin({

webpack/webpack.prod.js

@@ -2,6 +2,7 @@
 const dotenv = require('dotenv');
 const path = require('path');
 const { DefinePlugin } = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 
 let envKeys = {};
 try {
@@ -20,5 +21,15 @@ module.exports = {
   mode: 'production',
   devtool: 'source-map',
   stats: 'normal',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: true,
+        },
+      }),
+    ],
+  },
   plugins: [new DefinePlugin(envKeys)],
 };