Merge pull request #222 from CatalystCode/enhancement/reduce-bundle-size

Enhancement/Reduce bundle size
doccano · Jun 11, 2019 · d5514ab · d5514ab
2 parents 4232830 + b5e2f2b
commit d5514ab
Show file tree

Hide file tree

Showing 14 changed files with 154 additions and 138 deletions.
diff --git a/app/server/static/components/mixin.js → ...rver/static/components/annotationMixin.js b/app/server/static/components/mixin.js → ...rver/static/components/annotationMixin.js
@@ -1,9 +1,7 @@
 import * as marked from 'marked';
-import hljs from 'highlight.js';
 import VueJsonPretty from 'vue-json-pretty';
 import isEmpty from 'lodash.isempty';
-import HTTP, { newHttpClient } from './http';
-import Messages from './messages.vue';
+import HTTP from './http';
 
 const getOffsetFromUrl = (url) => {
   const offsetMatch = url.match(/[?#].*offset=(\d+)/);
@@ -37,7 +35,7 @@ const storeOffsetInUrl = (offset) => {
   window.location.href = href;
 };
 
-export const annotationMixin = {
+export default {
   components: { VueJsonPretty },
 
   data() {
@@ -218,125 +216,3 @@ export const annotationMixin = {
     },
   },
 };
-
-export const uploadMixin = {
-  components: { Messages },
-
-  data: () => ({
-    file: '',
-    messages: [],
-    format: 'json',
-    isLoading: false,
-    isCloudUploadActive: false,
-    canUploadFromCloud: false,
-  }),
-
-  mounted() {
-    hljs.initHighlighting();
-  },
-
-  created() {
-    newHttpClient().get('/v1/features').then((response) => {
-      this.canUploadFromCloud = response.data.cloud_upload;
-    });
-  },
-
-  computed: {
-    projectId() {
-      return window.location.pathname.split('/')[2];
-    },
-
-    postUploadUrl() {
-      return window.location.pathname.split('/').slice(0, -1).join('/');
-    },
-
-    cloudUploadUrl() {
-      return '/cloud-storage'
-        + `?project_id=${this.projectId}`
-        + `&upload_format=${this.format}`
-        + `&next=${encodeURIComponent('about:blank')}`;
-    },
-  },
-
-  methods: {
-    cloudUpload() {
-      const iframeUrl = this.$refs.cloudUploadPane.contentWindow.location.href;
-      if (iframeUrl.indexOf('/v1/cloud-upload') > -1) {
-        this.isCloudUploadActive = false;
-        this.$nextTick(() => {
-          window.location.href = this.postUploadUrl;
-        });
-      }
-    },
-
-    upload() {
-      this.isLoading = true;
-      this.file = this.$refs.file.files[0];
-      const formData = new FormData();
-      formData.append('file', this.file);
-      formData.append('format', this.format);
-      HTTP.post('docs/upload',
-        formData,
-        {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        })
-        .then((response) => {
-          console.log(response); // eslint-disable-line no-console
-          this.messages = [];
-          window.location = this.postUploadUrl;
-        })
-        .catch((error) => {
-          this.isLoading = false;
-          this.handleError(error);
-        });
-    },
-
-    handleError(error) {
-      const problems = Array.isArray(error.response.data)
-        ? error.response.data
-        : [error.response.data];
-
-      problems.forEach((problem) => {
-        if ('detail' in problem) {
-          this.messages.push(problem.detail);
-        } else if ('text' in problem) {
-          this.messages = problem.text;
-        }
-      });
-    },
-
-    download() {
-      this.isLoading = true;
-      const headers = {};
-      if (this.format === 'csv') {
-        headers.Accept = 'text/csv; charset=utf-8';
-        headers['Content-Type'] = 'text/csv; charset=utf-8';
-      } else {
-        headers.Accept = 'application/json';
-        headers['Content-Type'] = 'application/json';
-      }
-      HTTP({
-        url: 'docs/download',
-        method: 'GET',
-        responseType: 'blob',
-        params: {
-          q: this.format,
-        },
-        headers,
-      }).then((response) => {
-        const url = window.URL.createObjectURL(new Blob([response.data]));
-        const link = document.createElement('a');
-        link.href = url;
-        link.setAttribute('download', 'file.' + this.format); // or any other extension
-        document.body.appendChild(link);
-        this.isLoading = false;
-        link.click();
-      }).catch((error) => {
-        this.isLoading = false;
-        this.handleError(error);
-      });
-    },
-  },
-};
diff --git a/app/server/static/components/document_classification.vue b/app/server/static/components/document_classification.vue
@@ -48,7 +48,7 @@ hr {
 </style>
 
 <script>
-import { annotationMixin } from './mixin';
+import annotationMixin from './annotationMixin';
 import HTTP from './http';
 import { simpleShortcut } from './filter';
 

diff --git a/app/server/static/components/download_seq2seq.vue b/app/server/static/components/download_seq2seq.vue
@@ -35,7 +35,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/components/download_sequence_labeling.vue b/app/server/static/components/download_sequence_labeling.vue
@@ -35,7 +35,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/components/download_text_classification.vue b/app/server/static/components/download_text_classification.vue
@@ -35,7 +35,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/components/hljsLanguages.js b/app/server/static/components/hljsLanguages.js
@@ -0,0 +1 @@
+module.exports = ['json'];
diff --git a/app/server/static/components/seq2seq.vue b/app/server/static/components/seq2seq.vue
@@ -38,7 +38,7 @@ block annotation-area
 </template>
 
 <script>
-import { annotationMixin } from './mixin';
+import annotationMixin from './annotationMixin';
 import todoFocus from './directives';
 import HTTP from './http';
 

diff --git a/app/server/static/components/sequence_labeling.vue b/app/server/static/components/sequence_labeling.vue
@@ -39,7 +39,7 @@ block annotation-area
 </style>
 
 <script>
-import { annotationMixin } from './mixin';
+import annotationMixin from './annotationMixin';
 import Annotator from './annotator.vue';
 import HTTP from './http';
 import { simpleShortcut } from './filter';

diff --git a/app/server/static/components/stats.vue b/app/server/static/components/stats.vue
@@ -32,11 +32,11 @@
 </template>
 
 <script>
-import { HorizontalBar, mixins, Doughnut } from 'vue-chartjs';
+import HorizontalBar from 'vue-chartjs/es/BaseCharts/HorizontalBar';
+import Doughnut from 'vue-chartjs/es/BaseCharts/Doughnut';
+import reactiveProp from 'vue-chartjs/es/mixins/reactiveProp';
 import HTTP from './http';
 
-const { reactiveProp } = mixins;
-
 const LineChart = {
   extends: HorizontalBar,
 

diff --git a/app/server/static/components/uploadMixin.js b/app/server/static/components/uploadMixin.js
@@ -0,0 +1,133 @@
+import hljs from 'highlight.js/lib/highlight';
+import hljsLanguages from './hljsLanguages';
+import HTTP, { newHttpClient } from './http';
+import Messages from './messages.vue';
+
+hljsLanguages.forEach((languageName) => {
+  /* eslint-disable import/no-dynamic-require, global-require */
+  const languageModule = require(`highlight.js/lib/languages/${languageName}`);
+  /* eslint-enable import/no-dynamic-require, global-require */
+  hljs.registerLanguage(languageName, languageModule);
+});
+
+export default {
+  components: { Messages },
+
+  data: () => ({
+    file: '',
+    messages: [],
+    format: 'json',
+    isLoading: false,
+    isCloudUploadActive: false,
+    canUploadFromCloud: false,
+  }),
+
+  mounted() {
+    hljs.initHighlighting();
+  },
+
+  created() {
+    newHttpClient().get('/v1/features').then((response) => {
+      this.canUploadFromCloud = response.data.cloud_upload;
+    });
+  },
+
+  computed: {
+    projectId() {
+      return window.location.pathname.split('/')[2];
+    },
+
+    postUploadUrl() {
+      return window.location.pathname.split('/').slice(0, -1).join('/');
+    },
+
+    cloudUploadUrl() {
+      return '/cloud-storage'
+        + `?project_id=${this.projectId}`
+        + `&upload_format=${this.format}`
+        + `&next=${encodeURIComponent('about:blank')}`;
+    },
+  },
+
+  methods: {
+    cloudUpload() {
+      const iframeUrl = this.$refs.cloudUploadPane.contentWindow.location.href;
+      if (iframeUrl.indexOf('/v1/cloud-upload') > -1) {
+        this.isCloudUploadActive = false;
+        this.$nextTick(() => {
+          window.location.href = this.postUploadUrl;
+        });
+      }
+    },
+
+    upload() {
+      this.isLoading = true;
+      this.file = this.$refs.file.files[0];
+      const formData = new FormData();
+      formData.append('file', this.file);
+      formData.append('format', this.format);
+      HTTP.post('docs/upload',
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+        .then((response) => {
+          console.log(response); // eslint-disable-line no-console
+          this.messages = [];
+          window.location = this.postUploadUrl;
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          this.handleError(error);
+        });
+    },
+
+    handleError(error) {
+      const problems = Array.isArray(error.response.data)
+        ? error.response.data
+        : [error.response.data];
+
+      problems.forEach((problem) => {
+        if ('detail' in problem) {
+          this.messages.push(problem.detail);
+        } else if ('text' in problem) {
+          this.messages = problem.text;
+        }
+      });
+    },
+
+    download() {
+      this.isLoading = true;
+      const headers = {};
+      if (this.format === 'csv') {
+        headers.Accept = 'text/csv; charset=utf-8';
+        headers['Content-Type'] = 'text/csv; charset=utf-8';
+      } else {
+        headers.Accept = 'application/json';
+        headers['Content-Type'] = 'application/json';
+      }
+      HTTP({
+        url: 'docs/download',
+        method: 'GET',
+        responseType: 'blob',
+        params: {
+          q: this.format,
+        },
+        headers,
+      }).then((response) => {
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', 'file.' + this.format); // or any other extension
+        document.body.appendChild(link);
+        this.isLoading = false;
+        link.click();
+      }).catch((error) => {
+        this.isLoading = false;
+        this.handleError(error);
+      });
+    },
+  },
+};
diff --git a/app/server/static/components/upload_seq2seq.vue b/app/server/static/components/upload_seq2seq.vue
@@ -38,7 +38,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/components/upload_sequence_labeling.vue b/app/server/static/components/upload_sequence_labeling.vue
@@ -40,7 +40,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/components/upload_text_classification.vue b/app/server/static/components/upload_text_classification.vue
@@ -40,7 +40,7 @@ block example-format-area
 </template>
 
 <script>
-import { uploadMixin } from './mixin';
+import uploadMixin from './uploadMixin';
 
 export default uploadMixin;
 </script>
diff --git a/app/server/static/webpack.config.js b/app/server/static/webpack.config.js
@@ -3,6 +3,8 @@ const path = require('path');
 const process = require('process');
 const BundleTracker = require('webpack-bundle-tracker');
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
+const { ContextReplacementPlugin } = require('webpack');
+const hljsLanguages = require('./components/hljsLanguages');
 
 const devMode = process.env.DEBUG !== 'False';
 const hotReload = process.env.HOT_RELOAD === '1';
@@ -58,6 +60,10 @@ module.exports = {
         ]
     },
     plugins: [
+        new ContextReplacementPlugin(
+            /highlight\.js\/lib\/languages$/,
+            new RegExp(`^./(${hljsLanguages.join('|')})$`)
+        ),
         new BundleTracker({ filename: './webpack-stats.json' }),
         new VueLoaderPlugin()
     ],