Implement extract and dynamic import

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).

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' => [
 

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"
  }
 }

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>

root.js

@@ -0,0 +1,3 @@
+const path = require('path')
+
+module.exports = (() => path.resolve(__dirname))()

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()

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()

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')
+ }
+}