Replaced debounce and throttle

app/assets/javascripts/contextual_sidebar.js

 import $ from 'jquery';
+import { debounce } from 'lodash';
 import Cookies from 'js-cookie';
-import _ from 'underscore';
 import { GlBreakpointInstance as bp, breakpoints } from '@gitlab/ui/dist/utils';
 import { parseBoolean } from '~/lib/utils/common_utils';
 
@@ -43,7 +43,7 @@ export default class ContextualSidebar {
       $(document).trigger('content.resize');
     });
 
-    $(window).on('resize', () => _.debounce(this.render(), 100));
+    $(window).on('resize', debounce(() => this.render(), 100));
   }
 
   // See documentation: https://design.gitlab.com/regions/navigation#contextual-navigation

app/assets/javascripts/create_merge_request_dropdown.js

 /* eslint-disable no-new */
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import axios from './lib/utils/axios_utils';
 import Flash from './flash';
 import DropLab from './droplab/drop_lab';
@@ -55,7 +55,7 @@ export default class CreateMergeRequestDropdown {
     this.isCreatingMergeRequest = false;
     this.isGettingRef = false;
     this.mergeRequestCreated = false;
-    this.refDebounce = _.debounce((value, target) => this.getRef(value, target), 500);
+    this.refDebounce = debounce((value, target) => this.getRef(value, target), 500);
     this.refIsValid = true;
     this.refsPath = this.wrapperEl.dataset.refsPath;
     this.suggestedRef = this.refInput.value;

app/assets/javascripts/filterable_list.js

 import $ from 'jquery';
-import _ from 'underscore';
+import { debounce } from 'lodash';
 import axios from './lib/utils/axios_utils';
 
 /**
@@ -29,7 +29,7 @@ export default class FilterableList {
 
   initSearch() {
     // Wrap to prevent passing event arguments to .filterResults;
-    this.debounceFilter = _.debounce(this.onFilterInput.bind(this), 500);
+    this.debounceFilter = debounce(this.onFilterInput.bind(this), 500);
 
     this.unbindEvents();
     this.bindEvents();

app/assets/javascripts/lazy_loader.js

-import _ from 'underscore';
+import { debounce, throttle } from 'lodash';
 
 export const placeholderImage =
   'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
@@ -82,7 +82,7 @@ export default class LazyLoader {
   }
 
   startIntersectionObserver = () => {
-    this.throttledElementsInView = _.throttle(() => this.checkElementsInView(), 300);
+    this.throttledElementsInView = throttle(() => this.checkElementsInView(), 300);
     this.intersectionObserver = new IntersectionObserver(this.onIntersection, {
       rootMargin: `${SCROLL_THRESHOLD}px 0px`,
       thresholds: 0.1,
@@ -102,8 +102,8 @@ export default class LazyLoader {
   };
 
   startLegacyObserver() {
-    this.throttledScrollCheck = _.throttle(() => this.scrollCheck(), 300);
-    this.debouncedElementsInView = _.debounce(() => this.checkElementsInView(), 300);
+    this.throttledScrollCheck = throttle(() => this.scrollCheck(), 300);
+    this.debouncedElementsInView = debounce(() => this.checkElementsInView(), 300);
     window.addEventListener('scroll', this.throttledScrollCheck);
     window.addEventListener('resize', this.debouncedElementsInView);
   }