From eaa15ea83369f4cc604acb29e71cf7347152265c Mon Sep 17 00:00:00 2001 From: absidue <48293849+absidue@users.noreply.github.com> Date: Tue, 6 Sep 2022 04:29:10 +0200 Subject: [PATCH] Webpack bundle dependencies (#2511) * Allow webpack to bundle *most* dependencies * Exclude *most* node_modules from getting packaged by electron-builder * Import only the required icons instead of bundling the whole icon pack * Reduce packaging blacklist to only include the few things that still need blacklisting --- _scripts/build.js | 22 ++-- _scripts/webpack.main.config.js | 13 +-- _scripts/webpack.renderer.config.js | 13 +-- .../ft-channel-bubble/ft-channel-bubble.vue | 2 +- .../ft-icon-button/ft-icon-button.js | 4 +- src/renderer/components/ft-input/ft-input.js | 10 +- src/renderer/components/ft-input/ft-input.vue | 2 +- .../ft-list-dropdown/ft-list-dropdown.vue | 2 +- .../ft-list-playlist/ft-list-playlist.vue | 4 +- .../ft-list-video/ft-list-video.vue | 6 +- .../ft-notification-banner.vue | 2 +- .../ft-profile-selector.vue | 2 +- .../components/ft-select/ft-select.vue | 2 +- .../ft-share-button/ft-share-button.vue | 18 +-- .../components/ft-tooltip/ft-tooltip.vue | 2 +- .../side-nav-more-options.vue | 16 +-- src/renderer/components/side-nav/side-nav.vue | 16 +-- src/renderer/components/top-nav/top-nav.vue | 12 +- .../watch-video-comments.vue | 10 +- .../watch-video-info/watch-video-info.vue | 14 +-- .../watch-video-live-chat.vue | 4 +- .../watch-video-playlist.vue | 12 +- src/renderer/main.js | 107 +++++++++++++++++- src/renderer/views/About/About.js | 20 ++-- src/renderer/views/Channel/Channel.vue | 2 +- src/renderer/views/Popular/Popular.vue | 2 +- src/renderer/views/Search/Search.vue | 2 +- .../views/Subscriptions/Subscriptions.vue | 2 +- src/renderer/views/Trending/Trending.vue | 2 +- src/renderer/views/Watch/Watch.vue | 2 +- 30 files changed, 208 insertions(+), 119 deletions(-) diff --git a/_scripts/build.js b/_scripts/build.js index 6b762cc7..4e909708 100644 --- a/_scripts/build.js +++ b/_scripts/build.js @@ -58,22 +58,14 @@ const config = { 'icon.svg', './dist/**/*', '!dist/web/*', - '!**/node_modules/**/.*', - '!**/node_modules/**/index.html', - '!**/{.github,Jenkinsfile}', - '!**/{CHANGES.md,CODE_OF_CONDUCT.md,CONTRIBUTING.md,CONTRIBUTION.md,DEVELOPMENT.md,docs,docs.md,docs.mli,examples,History.md,HISTORY.md,README.md,TODO.md,UPGRADE_GUIDE.md,UPGRADING.md}', - '!**/{commitlint.config.js,.editorconfig,.eslintignore,.eslintrc.{js,yml},.gitmodules,.huskyrc,.lintstagedrc,.nvmrc,.nycrc{,.json},.prettierrc{,.yaml},tslint.json}', - '!**/{.babelrc,bower.json,Gruntfile.js,Makefile,.npmrc.proregistry,rollup.config.js,.tm_properties,.tool-versions,tsconfig.json,webpack.config.js}', - '!**/*.{{,c,m}js,min,ts}.map', - '!**/*.d.ts', + '!node_modules/**/*', - // only exclude the src directory for specific packages - // as some of them have their dist code in there and we don't want to exclude those - '!**/node_modules/{@fortawesome/vue-fontawesome,agent-base,jquery,localforage,m3u8-parser,marked,mpd-parser,performance-now,video.js,vue,vue-i18n,vue-router}/src/*', - '!**/node_modules/**/{bin,man,scripts}/*', - '!**/node_modules/jquery/dist/jquery.slim*.js', - '!**/node_modules/video.js/dist/{alt/*,video.js}', - '!**/node_modules/@videojs/*/src' + // renderer + 'node_modules/{miniget,ytpl,ytsr}/**/*', + + '!**/README.md', + '!**/*.js.map', + '!**/*.d.ts', ], dmg: { contents: [ diff --git a/_scripts/webpack.main.config.js b/_scripts/webpack.main.config.js index 39919eb5..f9166f24 100644 --- a/_scripts/webpack.main.config.js +++ b/_scripts/webpack.main.config.js @@ -2,15 +2,9 @@ const path = require('path') const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin') -const { - dependencies, - devDependencies, - productName, -} = require('../package.json') +const { productName } = require('../package.json') -const externals = Object.keys(dependencies).concat(Object.keys(devDependencies)) const isDevMode = process.env.NODE_ENV === 'development' -const whiteListedModules = [] const config = { name: 'main', @@ -19,7 +13,10 @@ const config = { entry: { main: path.join(__dirname, '../src/main/index.js'), }, - externals: externals.filter(d => !whiteListedModules.includes(d)), + // webpack spits out errors while inlining electron-debug as + // it tries to dynamically load dependencies + // the error: "Critical dependency: the request of a dependency is an expression" + externals: ['electron-debug'], module: { rules: [ { diff --git a/_scripts/webpack.renderer.config.js b/_scripts/webpack.renderer.config.js index 9ed57e5f..6b20e728 100644 --- a/_scripts/webpack.renderer.config.js +++ b/_scripts/webpack.renderer.config.js @@ -4,15 +4,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') -const { - dependencies, - devDependencies, - productName, -} = require('../package.json') +const { productName } = require('../package.json') -const externals = Object.keys(dependencies).concat(Object.keys(devDependencies)) const isDevMode = process.env.NODE_ENV === 'development' -const whiteListedModules = ['vue'] const config = { name: 'renderer', @@ -32,7 +26,10 @@ const config = { path: path.join(__dirname, '../dist'), filename: '[name].js', }, - externals: externals.filter(d => !whiteListedModules.includes(d)), + // webpack spits out errors while inlining ytpl and ytsr as + // they dynamically import their package.json file to extract the bug report URL + // the error: "Critical dependency: the request of a dependency is an expression" + externals: ['ytpl', 'ytsr'], module: { rules: [ { diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue index 795a00c7..7e9cd68d 100644 --- a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue +++ b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.vue @@ -12,7 +12,7 @@ class="bubble selected" > diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index c324021b..2cf1ffa6 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -9,8 +9,8 @@ export default Vue.extend({ default: '' }, icon: { - type: String, - default: 'ellipsis-v' + type: Array, + default: () => ['fas', 'ellipsis-v'] }, theme: { type: String, diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js index ffba7a98..c5ee9451 100644 --- a/src/renderer/components/ft-input/ft-input.js +++ b/src/renderer/components/ft-input/ft-input.js @@ -67,7 +67,7 @@ export default Vue.extend({ // As the text input box should be empty clearTextButtonExisting: false, clearTextButtonVisible: false, - actionButtonIconName: 'search' + actionButtonIconName: ['fas', 'search'] } }, computed: { @@ -136,7 +136,7 @@ export default Vue.extend({ if (!this.inputDataPresent) { // Change back to default icon if text is blank - this.actionButtonIconName = 'search' + this.actionButtonIconName = ['fas', 'search'] return } @@ -165,15 +165,15 @@ export default Vue.extend({ if (isYoutubeLink) { // Go to URL (i.e. Video/Playlist/Channel - this.actionButtonIconName = 'arrow-right' + this.actionButtonIconName = ['fas', 'arrow-right'] } else { // Search with text - this.actionButtonIconName = 'search' + this.actionButtonIconName = ['fas', 'search'] } }) } catch (ex) { // On exception, consider text as invalid URL - this.actionButtonIconName = 'search' + this.actionButtonIconName = ['fas', 'search'] // Rethrow exception throw ex } diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue index 91f9eb7f..727ffeeb 100644 --- a/src/renderer/components/ft-input/ft-input.vue +++ b/src/renderer/components/ft-input/ft-input.vue @@ -24,7 +24,7 @@