diff --git a/README.md b/README.md
index 9357cf562..f3545a790 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Laravel-Vue SPA 
+# Laravel-Vue SPA
 
 <a href="https://github.com/cretueusebiu/laravel-vue-spa/actions"><img src="https://github.com/cretueusebiu/laravel-vue-spa/workflows/tests/badge.svg" alt="Build Status"></a>
 <a href="https://packagist.org/packages/cretueusebiu/laravel-vue-spa"><img src="https://poser.pugx.org/cretueusebiu/laravel-vue-spa/d/total.svg" alt="Total Downloads"></a>
@@ -12,21 +12,21 @@
 
 ## Features
 
-- Laravel 8
-- Vue + VueRouter + Vuex + VueI18n + ESlint
-- Pages with dynamic import and custom layouts
-- Login, register, email verification and password reset
-- Authentication with JWT
-- Socialite integration
-- Bootstrap 4 + Font Awesome 5
+-   Laravel 8
+-   Vue + VueRouter + Vuex + VueI18n + ESlint
+-   Pages with dynamic import and custom layouts
+-   Login, register, email verification and password reset
+-   Authentication with JWT
+-   Socialite integration
+-   Bootstrap 4 + Font Awesome 5
 
 ## Installation
 
-- `composer create-project --prefer-dist cretueusebiu/laravel-vue-spa`
-- Edit `.env` and set your database connection details
-- (When installed via git clone or download, run `php artisan key:generate` and `php artisan jwt:secret`)
-- `php artisan migrate`
-- `npm install`
+-   `composer create-project --prefer-dist cretueusebiu/laravel-vue-spa`
+-   Edit `.env` and set your database connection details
+-   (When installed via git clone or download, run `php artisan key:generate` and `php artisan jwt:secret`)
+-   `php artisan migrate`
+-   `npm install`
 
 ## Usage
 
@@ -46,6 +46,14 @@ npm run hot
 npm run production
 ```
 
+#### Extract mode
+
+this will enable extract and dynamic import
+
+```bash
+npm run extract-${prod|dev|watch|hot}
+```
+
 ## Socialite
 
 This project comes with GitHub as an example for [Laravel Socialite](https://laravel.com/docs/5.8/socialite).
diff --git a/config/app.php b/config/app.php
index a476d515a..7142dfbc5 100644
--- a/config/app.php
+++ b/config/app.php
@@ -11,7 +11,7 @@
     | framework needs to place the application's name in a notification or
     | any other location as required by the application or its packages.
     |
-    */
+     */
 
     'name' => env('APP_NAME', 'Laravel'),
 
@@ -24,7 +24,7 @@
     | running in. This may determine how you prefer to configure various
     | services the application utilizes. Set this in your ".env" file.
     |
-    */
+     */
 
     'env' => env('APP_ENV', 'production'),
 
@@ -37,7 +37,7 @@
     | stack traces will be shown on every error that occurs within your
     | application. If disabled, a simple generic error page is shown.
     |
-    */
+     */
 
     'debug' => (bool) env('APP_DEBUG', false),
 
@@ -50,7 +50,7 @@
     | the Artisan command line tool. You should set this to the root of
     | your application so that it is used when running Artisan tasks.
     |
-    */
+     */
 
     'url' => env('APP_URL', 'http://localhost'),
 
@@ -65,7 +65,7 @@
     | will be used by the PHP date and date-time functions. We have gone
     | ahead and set this to a sensible default for you out of the box.
     |
-    */
+     */
 
     'timezone' => 'UTC',
 
@@ -78,7 +78,7 @@
     | by the translation service provider. You are free to set this value
     | to any of the locales which will be supported by the application.
     |
-    */
+     */
 
     'locale' => 'en',
 
@@ -99,7 +99,7 @@
     | is not available. You may change the value to correspond to any of
     | the language folders that are provided through your application.
     |
-    */
+     */
 
     'fallback_locale' => 'en',
 
@@ -112,7 +112,7 @@
     | data for your database seeds. For example, this will be used to get
     | localized telephone numbers, street address information and more.
     |
-    */
+     */
 
     'faker_locale' => 'en_US',
 
@@ -125,7 +125,7 @@
     | to a random, 32 character string, otherwise these encrypted strings
     | will not be safe. Please do this before deploying an application!
     |
-    */
+     */
 
     'key' => env('APP_KEY'),
 
@@ -140,7 +140,9 @@
     | request to your application. Feel free to add your own services to
     | this array to grant expanded functionality to your applications.
     |
-    */
+     */
+
+    'mix_extract' => env('MIX_EXTRACT', false),
 
     'providers' => [
 
@@ -194,7 +196,7 @@
     | is started. However, feel free to register as many as you wish as
     | the aliases are "lazy" loaded so they don't hinder performance.
     |
-    */
+     */
 
     'aliases' => [
 
diff --git a/package.json b/package.json
index b378ca399..1eb5f27c7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,17 @@
     "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
     "prod": "npm run production",
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "lint": "eslint --fix --ext .js,.vue resources/js"
+    "lint": "eslint --fix --ext .js,.vue resources/js",
+    "extract-dev": "concurrently \"npm run extract-dev-css\" \"npm run extract-dev-js\" --kill-others-on-fail",
+    "extract-watch": "concurrently \"npm run extract-dev-css -- --watch\" \"npm run extract-dev-js -- --watch\" --kill-others-on-fail",
+    "extract-hot": "concurrently \"npm run extract-hot-css\" \"npm run extract-hot-js\" --kill-others-on-fail",
+    "extract-prod": "concurrently \"npm run extract-prod-css\" \"npm run extract-prod-js\" --kill-others-on-fail",
+    "extract-dev-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack/extract.js --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "extract-hot-js": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --env.mixfile=webpack/extract.js --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "extract-prod-js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack/extract.js --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "extract-dev-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack/extract-css.js --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "extract-hot-css": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --env.mixfile=webpack/extract-css.js --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "extract-prod-css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --env.mixfile=webpack/extract-css.js --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -35,6 +45,7 @@
     "@babel/eslint-parser": "^7.12.1",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.12.1",
+    "concurrently": "^5.3.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.12.1",
     "eslint-config-standard": "^16.0.1",
@@ -44,11 +55,13 @@
     "eslint-plugin-standard": "^4.0.2",
     "eslint-plugin-vue": "^7.1.0",
     "laravel-mix": "^5.0.7",
+    "laravel-mix-merge-manifest": "^0.1.2",
     "laravel-mix-versionhash": "^1.1.7",
     "resolve-url-loader": "^3.1.2",
     "sass": "^1.28.0",
     "sass-loader": "^10.0.4",
     "vue-template-compiler": "^2.6.12",
-    "webpack-bundle-analyzer": "^3.9.0"
+    "webpack-bundle-analyzer": "^3.9.0",
+    "webpack-chunk-rename-plugin": "^1.0.3"
   }
 }
diff --git a/resources/views/spa.blade.php b/resources/views/spa.blade.php
index bf3f2d2f7..d0a535ec3 100644
--- a/resources/views/spa.blade.php
+++ b/resources/views/spa.blade.php
@@ -25,6 +25,12 @@
   </script>
 
   {{-- Load the application scripts --}}
+  @if(config('app.mix_extract'))
+  <script src="{{ mix('dist/js/manifest.js') }}"></script>
+  <script src="{{ mix('dist/js/vendor.js') }}"></script>
   <script src="{{ mix('dist/js/app.js') }}"></script>
+  @else
+  <script src="{{ mix('dist/js/app.js') }}"></script>
+  @endif
 </body>
 </html>
diff --git a/root.js b/root.js
new file mode 100644
index 000000000..b0d28d9cf
--- /dev/null
+++ b/root.js
@@ -0,0 +1,3 @@
+const path = require('path')
+
+module.exports = (() => path.resolve(__dirname))()
diff --git a/webpack/extract-css.js b/webpack/extract-css.js
new file mode 100644
index 000000000..ee3838847
--- /dev/null
+++ b/webpack/extract-css.js
@@ -0,0 +1,9 @@
+const mix = require('laravel-mix')
+const webpackConfig = require('./webpack.config')
+require('laravel-mix-merge-manifest')
+
+mix
+  .sass('resources/sass/app.scss', 'public/dist/css')
+  .webpackConfig(webpackConfig)
+  .mergeManifest()
+mix.inProduction() ? mix.version() : mix.sourceMaps()
diff --git a/webpack/extract.js b/webpack/extract.js
new file mode 100644
index 000000000..86b7c40b4
--- /dev/null
+++ b/webpack/extract.js
@@ -0,0 +1,12 @@
+const mix = require('laravel-mix')
+const webpackConfig = require('./webpack.config')
+require('laravel-mix-merge-manifest')
+
+mix
+  .js('resources/js/app.js', 'public/dist/js')
+  .webpackConfig(webpackConfig)
+  .extract()
+  .disableNotifications()
+  .mergeManifest()
+
+mix.inProduction() ? mix.version() : mix.sourceMaps()
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
new file mode 100644
index 000000000..556582f97
--- /dev/null
+++ b/webpack/webpack.config.js
@@ -0,0 +1,33 @@
+const path = require('path')
+const appRoot = require('../root')
+const ChunkRenamePlugin = require('webpack-chunk-rename-plugin')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const report = process.argv.includes('--report')
+const hmr = process.argv.includes('--hot')
+
+module.exports = {
+  plugins: [
+    new ChunkRenamePlugin({
+      initialChunksWithEntry: true,
+      '/dist/js/app': 'dist/js/app.js',
+      '/dist/js/vendor': 'dist/js/vendor.js'
+    }),
+    ...(report ? [new BundleAnalyzerPlugin({ openAnalyzer: true })] : [])
+  ],
+  resolve: {
+    extensions: ['.js', '.json', '.vue'],
+    alias: {
+      '~': path.join(appRoot, './resources/js')
+    }
+  },
+  devServer: {
+    proxy: {
+      '*': 'http://localhost:8000'
+    }
+  },
+  output: {
+    chunkFilename: 'dist/js/chunks/[chunkhash:6].chunk.js',
+    path: hmr ? '/' : path.resolve(appRoot, './public')
+  }
+}