npm: Build and packaging improvements (#568)

* remove unused plugins and minimizer js

* update dependencies

* fix build, update dependencies

* using lazy_use components

* add additional components

* optimization: lazy loading i18n locales

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/package.json

@@ -32,10 +32,8 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@antv/data-set": "^0.11.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
-    "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "ant-design-vue": "~1.6.2",
@@ -47,7 +45,6 @@
     "lodash": "^4.17.15",
     "md5": "^2.2.1",
     "moment": "^2.26.0",
-    "node-emoji": "^1.10.0",
     "npm-check-updates": "^6.0.1",
     "nprogress": "^0.2.0",
     "viser-vue": "^2.4.8",
@@ -62,7 +59,6 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@kazupon/vue-i18n-loader": "^0.5.0",
     "@vue/cli": "^4.4.1",
     "@vue/cli-plugin-babel": "^4.4.1",
     "@vue/cli-plugin-eslint": "^4.4.1",
@@ -85,6 +81,7 @@
     "less-loader": "^5.0.0",
     "node-sass": "^4.13.1",
     "sass-loader": "^8.0.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "vue-cli-plugin-i18n": "^0.6.1",
     "vue-svg-icon-loader": "^2.1.1",
     "vue-template-compiler": "^2.6.11",

ui/src/components/header/TranslationMenu.vue

@@ -24,48 +24,32 @@
       slot="overlay"
       :selectedKeys="[language]"
       @click="onClick">
-      <a-menu-item key="en" :value="enUS">English</a-menu-item>
-      <a-menu-item key="hi" :value="hi">हिन्दी</a-menu-item>
-      <a-menu-item key="ja_JP" :value="jpJP">日本語</a-menu-item>
-      <a-menu-item key="ko_KR" :value="koKR">한국어</a-menu-item>
-      <a-menu-item key="zh_CN" :value="zhCN">简体中文</a-menu-item>
-      <a-menu-item key="ar" :value="arEG">Arabic</a-menu-item>
-      <a-menu-item key="ca" :value="caES">Catalan</a-menu-item>
-      <a-menu-item key="de_DE" :value="deDE">Deutsch</a-menu-item>
-      <a-menu-item key="es" :value="esES">Español</a-menu-item>
-      <a-menu-item key="fr_FR" :value="frFR">Français</a-menu-item>
-      <a-menu-item key="it_IT" :value="itIT">Italiano</a-menu-item>
-      <a-menu-item key="hu" :value="huHU">Magyar</a-menu-item>
-      <a-menu-item key="nl_NL" :value="nlNL">Nederlands</a-menu-item>
-      <a-menu-item key="nb_NO" :value="nbNO">Norsk</a-menu-item>
-      <a-menu-item key="pl" :value="plPL">Polish</a-menu-item>
-      <a-menu-item key="pt_BR" :value="ptBR">Português brasileiro</a-menu-item>
-      <a-menu-item key="ru_RU" :value="ruRU">Русский</a-menu-item>
+      <a-menu-item key="en" value="enUS">English</a-menu-item>
+      <a-menu-item key="hi" value="hi">हिन्दी</a-menu-item>
+      <a-menu-item key="ja_JP" value="jpJP">日本語</a-menu-item>
+      <a-menu-item key="ko_KR" value="koKR">한국어</a-menu-item>
+      <a-menu-item key="zh_CN" value="zhCN">简体中文</a-menu-item>
+      <a-menu-item key="ar" value="arEG">Arabic</a-menu-item>
+      <a-menu-item key="ca" value="caES">Catalan</a-menu-item>
+      <a-menu-item key="de_DE" value="deDE">Deutsch</a-menu-item>
+      <a-menu-item key="es" value="esES">Español</a-menu-item>
+      <a-menu-item key="fr_FR" value="frFR">Français</a-menu-item>
+      <a-menu-item key="it_IT" value="itIT">Italiano</a-menu-item>
+      <a-menu-item key="hu" value="huHU">Magyar</a-menu-item>
+      <a-menu-item key="nl_NL" value="nlNL">Nederlands</a-menu-item>
+      <a-menu-item key="nb_NO" value="nbNO">Norsk</a-menu-item>
+      <a-menu-item key="pl" value="plPL">Polish</a-menu-item>
+      <a-menu-item key="pt_BR" value="ptBR">Português brasileiro</a-menu-item>
+      <a-menu-item key="ru_RU" value="ruRU">Русский</a-menu-item>
     </a-menu>
   </a-dropdown>
 </template>
 
 <script>
 import Vue from 'vue'
-import enUS from 'ant-design-vue/lib/locale-provider/en_US'
-import arEG from 'ant-design-vue/lib/locale-provider/ar_EG'
-import caES from 'ant-design-vue/lib/locale-provider/ca_ES'
-import deDE from 'ant-design-vue/lib/locale-provider/de_DE'
-import esES from 'ant-design-vue/lib/locale-provider/es_ES'
-import frFR from 'ant-design-vue/lib/locale-provider/fr_FR'
-import huHU from 'ant-design-vue/lib/locale-provider/hu_HU'
-import itIT from 'ant-design-vue/lib/locale-provider/it_IT'
-import jpJP from 'ant-design-vue/lib/locale-provider/ja_JP'
-import koKR from 'ant-design-vue/lib/locale-provider/ko_KR'
-import nbNO from 'ant-design-vue/lib/locale-provider/nb_NO'
-import nlNL from 'ant-design-vue/lib/locale-provider/nl_NL'
-import plPL from 'ant-design-vue/lib/locale-provider/pl_PL'
-import ptBR from 'ant-design-vue/lib/locale-provider/pt_BR'
-import ruRU from 'ant-design-vue/lib/locale-provider/ru_RU'
-import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-import hi from 'ant-design-vue/lib/locale-provider/he_IL'
 import moment from 'moment'
 import 'moment/locale/zh-cn'
+import { loadLanguageAsync } from '@/locales'
 
 moment.locale('en')
 
@@ -73,24 +57,7 @@ export default {
   name: 'TranslationMenu',
   data () {
     return {
-      language: 'en',
-      enUS,
-      arEG,
-      caES,
-      deDE,
-      esES,
-      frFR,
-      huHU,
-      itIT,
-      jpJP,
-      koKR,
-      nbNO,
-      nlNL,
-      plPL,
-      ptBR,
-      ruRU,
-      zhCN,
-      hi
+      language: 'en'
     }
   },
   mounted () {
@@ -100,7 +67,7 @@ export default {
   methods: {
     moment,
     onClick (e) {
-      var localeValue = e.key
+      let localeValue = e.key
       if (!localeValue) {
         localeValue = 'en'
       }
@@ -112,6 +79,7 @@ export default {
       this.language = localeValue
       moment.locale(localeValue)
       Vue.ls.set('LOCALE', localeValue)
+      loadLanguageAsync(localeValue)
     }
   }
 }

ui/src/core/lazy_lib/components_use.js

@@ -57,7 +57,13 @@ import {
   Popconfirm,
   Descriptions,
   message,
-  notification
+  notification,
+  Affix,
+  Timeline,
+  Pagination,
+  Comment,
+  Tree,
+  Calendar
 } from 'ant-design-vue'
 
 Vue.use(ConfigProvider)
@@ -98,6 +104,12 @@ Vue.use(Progress)
 Vue.use(Skeleton)
 Vue.use(Popconfirm)
 Vue.use(notification)
+Vue.use(Affix)
+Vue.use(Timeline)
+Vue.use(Pagination)
+Vue.use(Comment)
+Vue.use(Tree)
+Vue.use(Calendar)
 
 Vue.prototype.$confirm = Modal.confirm
 Vue.prototype.$message = message

ui/src/core/lazy_use.js

@@ -19,18 +19,32 @@ import Vue from 'vue'
 import VueStorage from 'vue-ls'
 import config from '@/config/settings'
 
-// base library
+// base library'
+// import Viser from 'viser-vue'
+import VueCropper from 'vue-cropper'
 import '@/core/lazy_lib/components_use'
-import Viser from 'viser-vue'
+
+import 'ant-design-vue/dist/antd.min.css'
+import '@/style/vars.less'
 
 // ext library
 import VueClipboard from 'vue-clipboard2'
 import PermissionHelper from '@/utils/helper/permission'
 
+// customisation
+import Spin from 'ant-design-vue/es/spin/Spin'
+
 VueClipboard.config.autoSetContainer = true
 
-Vue.use(Viser)
+// Vue.use(Viser)
 
 Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)
+Vue.use(VueCropper)
+
+Spin.setDefaultIndicator({
+  indicator: (h) => {
+    return <a-icon type="loading" style="font-size: 30px" spin />
+  }
+})

ui/src/locales/index.js

@@ -18,24 +18,45 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 
-function loadLocaleMessages () {
-  const locales = require.context('./', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
-}
+const loadedLanguage = []
+const messages = {}
 
 Vue.use(VueI18n)
 
-export default new VueI18n({
+export const i18n = new VueI18n({
   locale: Vue.ls ? Vue.ls.get('LOCALE') || 'en' : 'en',
   fallbackLocale: 'en',
   silentTranslationWarn: true,
-  messages: loadLocaleMessages()
+  messages: messages
 })
+
+export function loadLanguageAsync (lang) {
+  if (!lang) {
+    lang = Vue.ls ? Vue.ls.get('LOCALE') || 'en' : 'en'
+  }
+  if (loadedLanguage.includes(lang)) {
+    return Promise.resolve(setLanguage(lang))
+  }
+
+  return fetch(`locales/${lang}.json`)
+    .then(response => response.json())
+    .then(json => Promise.resolve(setLanguage(lang, json)))
+}
+
+function setLanguage (lang, message) {
+  if (i18n) {
+    i18n.locale = lang
+
+    if (message && Object.keys(message).length > 0) {
+      i18n.setLocaleMessage(lang, message)
+    }
+  }
+
+  if (!loadedLanguage.includes(lang)) {
+    loadedLanguage.push(lang)
+  }
+
+  if (message && Object.keys(message).length > 0) {
+    messages[lang] = message
+  }
+}

ui/src/main.js

@@ -19,10 +19,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import i18n from './locales'
+import { i18n, loadLanguageAsync } from './locales'
 
 import bootstrap from './core/bootstrap'
-import './core/use'
+import './core/lazy_use'
 import './core/ext'
 import './permission' // permission control
 import './utils/filter' // global filter
@@ -38,11 +38,14 @@ Vue.use(toLocaleDatePlugin)
 fetch('config.json').then(response => response.json()).then(config => {
   Vue.prototype.$config = config
   Vue.axios.defaults.baseURL = config.apiBase
-  new Vue({
-    router,
-    store,
-    i18n,
-    created: bootstrap,
-    render: h => h(App)
-  }).$mount('#app')
+
+  loadLanguageAsync().then(() => {
+    new Vue({
+      router,
+      store,
+      i18n,
+      created: bootstrap,
+      render: h => h(App)
+    }).$mount('#app')
+  })
 })

ui/src/permission.js

@@ -17,7 +17,7 @@
 
 import Cookies from 'js-cookie'
 import Vue from 'vue'
-import i18n from './locales'
+import { i18n } from './locales'
 import router from './router'
 import store from './store'
 

ui/src/store/modules/user.js

@@ -23,7 +23,7 @@ import notification from 'ant-design-vue/es/notification'
 import router from '@/router'
 import store from '@/store'
 import { login, logout, api } from '@/api'
-import i18n from '@/locales'
+import { i18n } from '@/locales'
 import { ACCESS_TOKEN, CURRENT_PROJECT, DEFAULT_THEME, APIS, ASYNC_JOB_IDS, ZONES, TIMEZONE_OFFSET, USE_BROWSER_TIMEZONE } from '@/store/mutation-types'
 
 const user = {

ui/src/utils/plugins.js

@@ -16,7 +16,7 @@
 // under the License.
 
 import _ from 'lodash'
-import i18n from '@/locales'
+import { i18n } from '@/locales'
 import { api } from '@/api'
 import { message, notification } from 'ant-design-vue'
 import eventBus from '@/config/eventBus'

ui/src/utils/request.js

@@ -21,7 +21,7 @@ import router from '@/router'
 import { VueAxios } from './axios'
 import notification from 'ant-design-vue/es/notification'
 import { CURRENT_PROJECT } from '@/store/mutation-types'
-import i18n from '@/locales'
+import { i18n } from '@/locales'
 import store from '@/store'
 
 const service = axios.create({

ui/vue.config.js

@@ -21,6 +21,7 @@ const fs = require('fs')
 const packageJson = fs.readFileSync('./package.json')
 const version = JSON.parse(packageJson).version || 'master'
 const createThemeColorReplacerPlugin = require('./theme.config')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -47,12 +48,36 @@ const vueConfig = {
     plugins: [
       // Ignore all locale files of moment.js
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin(/@antv\/g2/),
       new webpack.DefinePlugin({
         'process.env': {
           PACKAGE_VERSION: '"' + version + '"'
         }
       })
-    ]
+    ],
+    optimization: {
+      minimizer: [
+        new UglifyJsPlugin({
+          cache: true,
+          parallel: true,
+          uglifyOptions: {
+            compress: false,
+            ecma: 6,
+            mangle: true
+          },
+          sourceMap: true
+        })
+      ],
+      splitChunks: {
+        cacheGroups: {
+          commons: {
+            test: /[\\/]node_modules[\\/]/,
+            name: 'vendors',
+            chunks: 'all'
+          }
+        }
+      }
+    }
   },
 
   chainWebpack: (config) => {