From b7fa80ad5d595a39b4f8c84bcd311ef72c14c4a1 Mon Sep 17 00:00:00 2001 From: Aslam Date: Sun, 13 Dec 2020 18:47:41 +0700 Subject: [PATCH 1/2] Implement extract with dynamic import --- README.md | 34 +++++++++++++++++++++------------- config/app.php | 24 +++++++++++++----------- package.json | 19 +++++++++++++++++-- resources/views/spa.blade.php | 6 ++++++ root.js | 3 +++ webpack/extract-css.js | 9 +++++++++ webpack/extract.js | 12 ++++++++++++ webpack/webpack.config.js | 33 +++++++++++++++++++++++++++++++++ 8 files changed, 114 insertions(+), 26 deletions(-) create mode 100644 root.js create mode 100644 webpack/extract-css.js create mode 100644 webpack/extract.js create mode 100644 webpack/webpack.config.js 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 Build Status Total Downloads @@ -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..4ea021591 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,19 @@ "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-watch-css\" \"npm run extract-watch-js\" --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-watch-js": "npm run extract-dev-js -- --watch", + "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-watch-css": "npm run extract-dev-css -- --watch", + "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 +47,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 +57,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 @@ {{-- Load the application scripts --}} + @if(config('app.mix_extract')) + + + @else + + @endif 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') + } +} From f1cf5217c2341cb5f8b05b67077d92e13bbee465 Mon Sep 17 00:00:00 2001 From: Aslam Date: Sun, 13 Dec 2020 18:54:30 +0700 Subject: [PATCH 2/2] Implement extract with dynamic import --- package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index 4ea021591..1eb5f27c7 100644 --- a/package.json +++ b/package.json @@ -10,15 +10,13 @@ "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", "extract-dev": "concurrently \"npm run extract-dev-css\" \"npm run extract-dev-js\" --kill-others-on-fail", - "extract-watch": "concurrently \"npm run extract-watch-css\" \"npm run extract-watch-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-watch-js": "npm run extract-dev-js -- --watch", "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-watch-css": "npm run extract-dev-css -- --watch", "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" },