Use specific methods from lodash to reduce bundle size

front/src/App.vue

@@ -52,7 +52,7 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
+import _ from '@/lodash'
 import {mapState} from 'vuex'
 import { WebSocketBridge } from 'django-channels'
 import GlobalEvents from '@/components/utils/global-events'

front/src/components/Pagination.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "@/lodash"
 
 export default {
   props: {

front/src/components/audio/Search.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import logger from '@/logging'
 import AlbumCard from '@/components/audio/album/Card'

front/src/components/audio/Track.vue

@@ -4,7 +4,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import _ from 'lodash'
+import _ from '@/lodash'
 import url from '@/utils/url'
 import {Howl} from 'howler'
 

front/src/components/audio/album/Widget.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import PlayButton from '@/components/audio/PlayButton'
 

front/src/components/audio/track/Widget.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import PlayButton from '@/components/audio/PlayButton'
 
@@ -109,7 +109,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../style/vendor/media';
+@import "../../../style/vendor/media";
 
 .play-overlay {
   position: absolute;

front/src/components/federation/LibraryWidget.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import LibraryCard from '@/views/content/remote/Card'
 

front/src/components/instance/Stats.vue

@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import logger from '@/logging'
 

front/src/components/library/Artist.vue

@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import _ from "lodash"
+import _ from "@/lodash"
 import axios from "axios"
 import logger from "@/logging"
 import backend from "@/audio/backend"

front/src/components/library/Artists.vue

@@ -70,7 +70,7 @@
 
 <script>
 import axios from "axios"
-import _ from "lodash"
+import _ from "@/lodash"
 import $ from "jquery"
 
 import logger from "@/logging"

front/src/components/library/FileUpload.vue

@@ -123,6 +123,7 @@
 </template>
 
 <script>
+import _ from "@/lodash"
 import $ from "jquery";
 import axios from "axios";
 import logger from "@/logging";

front/src/components/library/Radios.vue

@@ -92,7 +92,7 @@
 
 <script>
 import axios from "axios"
-import _ from "lodash"
+import _ from "@/lodash"
 import $ from "jquery"
 
 import logger from "@/logging"

front/src/components/library/radios/Builder.vue

@@ -94,7 +94,7 @@
 <script>
 import axios from "axios"
 import $ from "jquery"
-import _ from "lodash"
+import _ from "@/lodash"
 import BuilderFilter from "./Filter"
 import TrackTable from "@/components/audio/track/Table"
 import RadioButton from "@/components/radios/Button"

front/src/components/library/radios/Filter.vue

@@ -64,7 +64,7 @@
 <script>
 import axios from 'axios'
 import $ from 'jquery'
-import _ from 'lodash'
+import _ from '@/lodash'
 
 import Modal from '@/components/semantic/Modal'
 import TrackTable from '@/components/audio/track/Table'

front/src/components/manage/library/FilesTable.vue

@@ -106,7 +106,7 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
+import _ from '@/lodash'
 import time from '@/utils/time'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'

front/src/components/manage/users/InvitationsTable.vue

@@ -86,7 +86,7 @@
 <script>
 import axios from 'axios'
 import moment from 'moment'
-import _ from 'lodash'
+import _ from '@/lodash'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'
 import OrderingMixin from '@/components/mixins/Ordering'

front/src/components/manage/users/UsersTable.vue

@@ -96,7 +96,7 @@
 
 <script>
 import axios from 'axios'
-import _ from 'lodash'
+import _ from '@/lodash'
 import time from '@/utils/time'
 import Pagination from '@/components/Pagination'
 import ActionTable from '@/components/common/ActionTable'

front/src/components/playlists/PlaylistModal.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import {mapState} from 'vuex'
 

front/src/components/playlists/Widget.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import _ from 'lodash'
+import _ from '@/lodash'
 import axios from 'axios'
 import PlaylistCard from '@/components/playlists/Card'
 

front/src/lodash.js

+// cherry-pick specific lodash methods here to reduce bundle size
+
+export default {
+  clone: require('lodash/clone'),
+  debounce: require('lodash/debounce'),
+  get: require('lodash/get'),
+  merge: require('lodash/merge'),
+  range: require('lodash/range'),
+  shuffle: require('lodash/shuffle'),
+  sortBy: require('lodash/sortBy'),
+  throttle: require('lodash/throttle'),
+  uniq: require('lodash/uniq'),
+}