perf: reduce bundle size and replaced babel by ts-loader

README.md

@@ -162,12 +162,12 @@ import { useCache } from 'axios-cache-interceptor';
 
 <script
   crossorigin
-  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@VERSION/dist/index.bundle.js"
+  src="https://cdn.jsdelivr.net/npm/axios-cache-interceptor@VERSION/dist/index.min.js"
 ></script>
 <!-- or -->
 <script
   crossorigin
-  src="https://unpkg.com/axios-cache-interceptor@VERSION/dist/index.bundle.js"
+  src="https://unpkg.com/axios-cache-interceptor@VERSION/dist/index.min.js"
 ></script>
 ```
 
@@ -217,17 +217,13 @@ After that, you can made your own requests normally.
 
 ## Compiled code
 
-The compiled code is built in two different ways, one as nodejs module and one as a
-browser. Both of them uses **Babel** with
-[Browserslist `default` preset](https://github.com/browserslist/browserslist#full-list).
+The compiled code is built in two different ways, one as CommonsJS Module
+`(ES6 Compatible)` and one as a browser minified code `(ES5 Compatible)`.
 
 You can see more here about compiling options:
 
-- [Browser Build config](/webpack.config.js)
-- [NodeJS Build Config](/tsconfig.build.json)
-
-If, for some reason, you have a bug with the compiled code, such as a user have an
-incompatible browser, please contact me.
+- [Browser config](/tsconfig.browser.json) - [Webpack config](/webpack.config.js)
+- [NodeJS Config](/tsconfig.build.json)
 
 <br />
 

package.json

@@ -3,8 +3,9 @@
   "version": "0.7.5",
   "description": "Cache interceptor for axios",
   "main": "./dist/index.js",
-  "jsdelivr": "./dist/index.bundle.js",
-  "unpkg": "./dist/index.bundle.js",
+  "browser": "./dist/index.min.js",
+  "jsdelivr": "./dist/index.min.js",
+  "unpkg": "./dist/index.min.js",
   "runkitExampleFilename": "./examples/runkit.js",
   "scripts": {
     "build": "concurrently 'npm:build:*'",
@@ -47,13 +48,6 @@
   },
   "devDependencies": {
     "@arthurfiorette/prettier-config": "*",
-    "@babel/cli": "^7.16.0",
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-typescript": "^7.16.0",
-    "@babel/runtime": "^7.16.3",
     "@types/jest": "^27.0.2",
     "@types/node": "^17.0.0",
     "@types/webpack": "^5.28.0",
@@ -61,7 +55,6 @@
     "@typescript-eslint/parser": "^5.7.0",
     "auto-changelog": "^2.3.0",
     "axios": "~0.24.0",
-    "babel-loader": "^8.2.3",
     "concurrently": "^6.4.0",
     "eslint": "^8.3.0",
     "eslint-config-prettier": "^8.3.0",
@@ -71,6 +64,8 @@
     "prettier-plugin-jsdoc": "^0.3.23",
     "prettier-plugin-organize-imports": "^2.3.3",
     "ts-jest": "^27.1.1",
+    "ts-loader": "^9.2.6",
+    "tslib": "^2.3.1",
     "typescript": "^4.5.4",
     "weak-napi": "^2.0.2",
     "webpack": "^5.65.0",

test/bundle.test.ts

@@ -5,7 +5,7 @@ import { AxiosStorage } from '../src/storage/storage';
 
 describe('test bundle imports', () => {
   it('should have basic storages', async () => {
-    const bundle = await import('../src/index.bundle');
+    const bundle = await import('../src/index.browser');
 
     expect(bundle.useCache).toBe(useCache);
     expect(bundle.AxiosStorage).toBe(AxiosStorage);

tsconfig.browser.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "target": "ES5",
+    "sourceMap": false,
+    "declaration": false,
+    "declarationMap": false,
+    "importHelpers": true
+  },
+  "include": ["src/index.browser.ts"]
+}

tsconfig.build.json

@@ -5,5 +5,5 @@
     "target": "ES6"
   },
   "include": ["src"],
-  "exclude": ["src/index.bundle.ts"]
+  "exclude": ["src/index.browser.ts"]
 }

webpack.config.js

@@ -1,5 +1,5 @@
 //@ts-check
-/* eslint-disable */
+/* eslint-disable @typescript-eslint/no-var-requires */
 
 const path = require('path');
 const TerserWebpackPlugin = require('terser-webpack-plugin');
@@ -8,11 +8,11 @@ const TerserWebpackPlugin = require('terser-webpack-plugin');
 const config = {
   mode: 'production',
 
-  entry: path.resolve(__dirname, 'src', 'index.bundle.ts'),
+  entry: path.resolve(__dirname, 'src', 'index.browser.ts'),
 
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'index.bundle.js',
+    filename: 'index.min.js',
     libraryTarget: 'umd',
     library: 'AxiosCacheInterceptor'
   },
@@ -26,20 +26,11 @@ const config = {
   module: {
     rules: [
       {
+        include: path.resolve(__dirname, 'src'),
         test: /\.(ts|js)$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            babelrc: false,
-            presets: [
-              ['@babel/preset-env', { targets: 'defaults' }],
-              '@babel/preset-typescript'
-            ],
-            plugins: [
-              '@babel/plugin-transform-modules-commonjs',
-              '@babel/plugin-transform-runtime'
-            ]
-          }
+        loader: 'ts-loader',
+        options: {
+          configFile: 'tsconfig.browser.json'
         }
       }
     ]