fixed web worker performance

[ci skip]

5 files changed, 14 insertions, 4 deletions

diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index fa6070dbf92..f0fc0031e35 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -35,7 +35,7 @@ export default {
           this.editor.createInstance(this.$el);
         })
         .then(() => this.setupEditor())
-        .catch((e) => { throw e;flash('Error setting up monaco. Please try again.'); });
+        .catch(() => flash('Error setting up monaco. Please try again.'));
     },
     setupEditor() {
       if (!this.activeFile) return;
diff --git a/app/assets/javascripts/repo/lib/diff/controller.js b/app/assets/javascripts/repo/lib/diff/controller.js
index cd1a2025f17..dc0b1c95e59 100644
--- a/app/assets/javascripts/repo/lib/diff/controller.js
+++ b/app/assets/javascripts/repo/lib/diff/controller.js
@@ -1,5 +1,6 @@
 /* global monaco */
-import DirtyDiffWorker from 'worker-loader!./worker.diff';
+import { throttle } from 'underscore';
+import DirtyDiffWorker from './diff_worker';
 import Disposable from '../common/disposable';
 
 export const getDiffChangeType = (change) => {
@@ -34,12 +35,14 @@ export default class DirtyDiffController {
     this.modelManager = modelManager;
     this.decorationsController = decorationsController;
     this.dirtyDiffWorker = new DirtyDiffWorker();
+    this.throttledComputeDiff = throttle(this.computeDiff, 250);
+    this.decorate = this.decorate.bind(this);
 
-    this.dirtyDiffWorker.addEventListener('message', e => this.decorate(e));
+    this.dirtyDiffWorker.addEventListener('message', this.decorate);
   }
 
   attachModel(model) {
-    model.onChange(() => this.computeDiff(model));
+    model.onChange(() => this.throttledComputeDiff(model));
   }
 
   computeDiff(model) {
@@ -61,6 +64,8 @@ export default class DirtyDiffController {
 
   dispose() {
     this.disposable.dispose();
+
+    this.dirtyDiffWorker.removeEventListener('message', this.decorate);
     this.dirtyDiffWorker.terminate();
   }
 }
diff --git a/app/assets/javascripts/repo/lib/diff/diff.js b/app/assets/javascripts/repo/lib/diff/diff.js
index ada24740688..0e37f5c4704 100644
--- a/app/assets/javascripts/repo/lib/diff/diff.js
+++ b/app/assets/javascripts/repo/lib/diff/diff.js
@@ -1,5 +1,6 @@
 import { diffLines } from 'diff';
 
+// eslint-disable-next-line import/prefer-default-export
 export const computeDiff = (originalContent, newContent) => {
   const changes = diffLines(originalContent, newContent);
 
diff --git a/app/assets/javascripts/repo/lib/diff/worker.diff.js b/app/assets/javascripts/repo/lib/diff/diff_worker.js
index e74c4046330..e74c4046330 100644
--- a/app/assets/javascripts/repo/lib/diff/worker.diff.js
+++ b/app/assets/javascripts/repo/lib/diff/diff_worker.js
diff --git a/config/webpack.config.js b/config/webpack.config.js
index f7a7182a627..78ced4c3e8c 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -117,6 +117,10 @@ var config = {
         options: { limit: 2048 },
       },
       {
+        test: /\_worker\.js$/,
+        loader: 'worker-loader',
+      },
+      {
         test: /\.(worker(\.min)?\.js|pdf|bmpr)$/,
         exclude: /node_modules/,
         loader: 'file-loader',