[SDPA-3712] reduce js bundle size (#630)

* [SDPA-3712] Splitted search code * Enable search load on demand mode for Reference site * [SDPA-3712] lodash optimization (#631) * [SDPA-3712] moment.js optimization (#632) * Added todo for splitchunk
dpc-sdp · Feb 17, 2020 · 8db306c · 8db306c
1 parent 99a0d91
commit 8db306c
Show file tree

Hide file tree

Showing 41 changed files with 491 additions and 152 deletions.
diff --git a/examples/basic-examples/nuxt.config.js b/examples/basic-examples/nuxt.config.js
@@ -33,12 +33,33 @@ export default {
     '@/assets/_custom.scss'
   ],
   build: {
-    // For debugging in dev mode
-    // https://github.com/nuxt/nuxt.js/issues/2734#issuecomment-410135071
     extend (config, { isDev, isClient }) {
       if (isDev) {
+        // For debugging in dev mode
+        // https://github.com/nuxt/nuxt.js/issues/2734#issuecomment-410135071
         config.devtool = isClient ? 'source-map' : 'inline-source-map'
       }
+
+      const webpack = require('webpack')
+      const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
+      config.plugins.push(new LodashModuleReplacementPlugin({
+        'caching': true,
+        'collections': true,
+        'paths': true,
+        'shorthands': true
+      }))
+      // Load moment 'en-au' locale only for performance.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You need to change it if your site is not in Australia.
+      config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-au/))
+    },
+
+    // Currently lodash is mainly brought by Elastic search JS lib.
+    // Below lodash optimization can be reviewed after we migrate to new ES JS client.
+    babel: {
+      plugins: [
+        'lodash'
+      ]
     }
   },
   ripple: {
@@ -75,7 +96,8 @@ export default {
       auth: {
         username: process.env.SEARCH_AUTH_USERNAME,
         password: process.env.SEARCH_AUTH_PASSWORD
-      }
+      },
+      loadOnDemand: 1
     }
   }
 }
diff --git a/examples/basic-examples/package.json b/examples/basic-examples/package.json
@@ -37,6 +37,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.8.0",
     "babel-plugin-dynamic-import-node": "^2.3.0",
+    "babel-plugin-lodash": "^3.3.2",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "core-js": "^2.6.5",
@@ -54,6 +55,7 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-vue": "^4.0.0",
+    "lodash-webpack-plugin": "^0.11.5",
     "node-sass": "^4.11.0",
     "sass-lint": "^1.12.1",
     "sass-loader": "^6.0.7",

diff --git a/examples/basic-examples/tide/modules/example-search/components/Search.vue b/examples/basic-examples/tide/modules/example-search/components/Search.vue
@@ -34,7 +34,7 @@ import { RplSearchForm, RplSearchResults } from '@dpc-sdp/ripple-search'
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplPageLayout } from '@dpc-sdp/ripple-layout'
 import formData from './formdata.js'
-import { searchMixin } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
+import { searchMixin, getSearch } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
 
 export default {
   name: 'ExampleSearchSimple',
@@ -50,7 +50,8 @@ export default {
   },
   mixins: [searchMixin],
   async asyncData ({ app, route }) {
-    const searchForm = await formData.getFormData(app.$tideSearch.setFilterOptions)
+    const tideSearch = getSearch(app)
+    const searchForm = await formData.getFormData(tideSearch.setFilterOptions)
     return {
       sidebar: false,
       searchComponent: 'RplCardEvent',
@@ -88,7 +89,7 @@ export default {
   },
   methods: {
     getComputedFilters () {
-      let filterValues = this.$tideSearch.getFiltersValues(this.searchForm.filterForm)
+      let filterValues = this.tideSearch.getFiltersValues(this.searchForm.filterForm)
       // Test date filter based on start / end fields.
       if (filterValues.field_event_date_end_value) {
         const setFilterDate = moment(filterValues.field_event_date_end_value.values)

diff --git a/examples/basic-examples/tide/modules/example-search/components/SearchSimple.vue b/examples/basic-examples/tide/modules/example-search/components/SearchSimple.vue
@@ -33,7 +33,7 @@ import { RplSearchForm, RplSearchResults } from '@dpc-sdp/ripple-search'
 import { RplRow, RplCol } from '@dpc-sdp/ripple-grid'
 import { RplPageLayout } from '@dpc-sdp/ripple-layout'
 import formData from './formdata-simple.js'
-import { searchMixin } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
+import { searchMixin, getSearch } from '@dpc-sdp/ripple-nuxt-tide/modules/search'
 
 export default {
   name: 'ExampleSearchSimple',
@@ -49,7 +49,8 @@ export default {
   },
   mixins: [searchMixin],
   async asyncData ({ app, route }) {
-    const searchForm = await formData.getFormData(app.$tideSearch.setFilterOptions)
+    const tideSearch = getSearch(app)
+    const searchForm = await formData.getFormData(tideSearch.setFilterOptions)
     return {
       sidebar: false,
       searchComponent: 'default',

diff --git a/examples/vic-gov-au/nuxt.config.js b/examples/vic-gov-au/nuxt.config.js
@@ -50,13 +50,50 @@ export default {
       Disallow: '/'
     }]
   ],
+  /*
+  ** Build
+  * https://nuxtjs.org/api/configuration-build/
+  */
   build: {
-    // For debugging in dev mode
-    // https://github.com/nuxt/nuxt.js/issues/2734#issuecomment-410135071
     extend (config, { isDev, isClient }) {
       if (isDev) {
+        // For debugging in dev mode
+        // https://github.com/nuxt/nuxt.js/issues/2734#issuecomment-410135071
         config.devtool = isClient ? 'source-map' : 'inline-source-map'
       }
+
+      const webpack = require('webpack')
+      const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
+      config.plugins.push(new LodashModuleReplacementPlugin({
+        'caching': true,
+        'collections': true,
+        'paths': true,
+        'shorthands': true
+        // 'cloning': true,
+        // 'currying': true,
+        // 'exotics': true,
+        // 'guards': true,
+        // 'metadata': true,
+        // 'deburring': true,
+        // 'unicode': true,
+        // 'chaining': true,
+        // 'memoizing': true,
+        // 'coercions': true,
+        // 'flattening': true,
+        // 'placeholders': true
+      }))
+      // Load moment 'en-au' locale only for performance.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You need to change it if your site is not in Australia.
+      config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en-au/))
+    },
+
+    // Currently lodash is mainly brought by Elastic search JS lib.
+    // Below lodash optimization can be reviewed after we migrate to new ES JS client.
+    babel: {
+      plugins: [
+        'lodash'
+      ]
     }
   },
   /*
@@ -117,7 +154,8 @@ export default {
       auth: {
         username: process.env.SEARCH_AUTH_USERNAME,
         password: process.env.SEARCH_AUTH_PASSWORD
-      }
+      },
+      loadOnDemand: 1 // 0 for previous load mode. If you have a custom search page before Ripple v1.5.7, you need small change your code to turn on this. A example: https://github.com/dpc-sdp/ripple/pull/630/files#diff-c797d3457e8f4ca26b5707a65bc76189R37
     },
     cachePurgePattern: []
   }

diff --git a/examples/vic-gov-au/package.json b/examples/vic-gov-au/package.json
@@ -32,6 +32,7 @@
   "devDependencies": {
     "@dpc-sdp/ripple-test-tools": "1.5.7",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-lodash": "^3.3.2",
     "cross-env": "^5.2.0",
     "cypress": "^3.1.5",
     "cypress-axe": "^0.4.0",
@@ -46,6 +47,7 @@
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
     "eslint-plugin-vue": "^4.0.0",
+    "lodash-webpack-plugin": "^0.11.5",
     "node-sass": "^4.11.0",
     "sass-lint": "^1.12.1",
     "sass-loader": "^6.0.7",

diff --git a/packages/components/Molecules/Form/fields/fieldRplchecklist.vue b/packages/components/Molecules/Form/fields/fieldRplchecklist.vue
@@ -54,7 +54,7 @@
 <script>
 import RplIcon from '@dpc-sdp/ripple-icon'
 import RplCheckbox from '../Checkbox.vue'
-import { isObject } from 'lodash'
+import isObject from 'lodash/isObject'
 import { abstractField, schema } from 'vue-form-generator'
 import deprecate from '@dpc-sdp/ripple-global/mixins/deprecate'
 

diff --git a/packages/components/Molecules/Form/formPikaday.vue b/packages/components/Molecules/Form/formPikaday.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { defaults } from 'lodash'
+import defaults from 'lodash/defaults'
 import moment from 'moment'
 import RplIcon from '@dpc-sdp/ripple-icon'
 

diff --git a/packages/create-ripple-app/cli.js b/packages/create-ripple-app/cli.js
@@ -19,58 +19,97 @@ const log = (msg, lvl = 'info') => {
   }
 }
 
-// Set options from a config file path relative to CWD
-const configFile = args.config
-let configFileArgs = {}
-if (configFile && fs.existsSync(__dirname, configFile)) {
-  configFileArgs = require(path.resolve(__dirname, configFile))
-}
-// param args take precedence
-const config = {
-  ...configFileArgs,
-  ...args
-}
-// split modules string into array
-if (typeof config.modules === 'string') {
-  config.modules = config.modules.split(',')
-}
+const cli = async () => {
+  // Set options from a config file path relative to CWD
+  const configFile = args.config
+  let configFileArgs = {}
+  if (configFile && fs.existsSync(__dirname, configFile)) {
+    configFileArgs = require(path.resolve(__dirname, configFile))
+  }
+  // param args take precedence
+  const config = {
+    ...configFileArgs,
+    ...args
+  }
+  // split modules string into array
+  if (typeof config.modules === 'string') {
+    config.modules = config.modules.split(',')
+  }
 
-// In a custom directory or current directory
-if (!process.argv[2]) {
-  log('no project directory specified', 'error')
-  process.exit(0)
-}
+  // In a custom directory or current directory
+  if (!process.argv[2]) {
+    log('no project directory specified', 'error')
+    process.exit(0)
+  }
 
-const outDir = path.resolve(process.argv[2])
-const existing = fs.existsSync(`${outDir}/package.json`)
+  const outDir = path.resolve(process.argv[2])
+  const existing = fs.existsSync(`${outDir}/package.json`)
 
-let generator
+  let generator
 
-if (args.forcenew || existing) {
-  const pkg = require(`${outDir}/package.json`)
-  const version = pkg.version
+  if (args.forcenew || existing) {
+    const pkg = require(`${outDir}/package.json`)
+    const version = pkg.version
+    const targetVersion = config.release
 
-  // Do auto updates for 18 release and above.
-  // TODO: It may will have issues when complex refactoring happened in several versions with one script.
-  // Can be reviewed later.
-  const minUpdateVersion = '18.0.0'
-  if (compareVersions(version, minUpdateVersion) !== -1) {
-    if (path.resolve(__dirname, `./generators/updates/${minUpdateVersion}`)) {
-      generator = path.resolve(__dirname, `./generators/updates/${minUpdateVersion}`)
-      log(`Updating ${outDir} from ${version} to latest`)
+    // Do auto updates for 18 release and above.
+    // TODO: It may will have issues when complex refactoring happened in several versions with one script.
+    // Can be reviewed later.
+    const minUpdateVersion = '18.0.0'
+    // Less than v18
+    if (compareVersions(version, minUpdateVersion) === -1) {
+      log('Cannot upgrade this version. Please use --forcenew flag to force new install.', 'error')
+      process.exit(0)
     }
+
+    log(`Your site ${outDir} current version is ${version}`)
+
+    // Less than v20
+    if (compareVersions(version, '20.0.0', '<=')) {
+      if (path.resolve(__dirname, `./generators/updates/${minUpdateVersion}`)) {
+        generator = path.resolve(__dirname, `./generators/updates/${minUpdateVersion}`)
+        log(`Updating ${outDir} to 20.0.0`)
+
+        await sao({ generator, outDir, logLevel: 2, config })
+          .run()
+          .catch((err) => {
+            console.trace(err)
+            process.exit(1)
+          })
+      }
+    }
+
+    // Less than v21
+    if (compareVersions(version, '21.0.0', '<=') && compareVersions(targetVersion, '20.0.0', '>')) {
+      if (path.resolve(__dirname, `./generators/updates/20.0.0`)) {
+        generator = path.resolve(__dirname, `./generators/updates/20.0.0`)
+        log(`Updating ${outDir} to 21.0.0`)
+        await sao({ generator, outDir, logLevel: 2, config })
+          .run()
+          .catch((err) => {
+            console.trace(err)
+            process.exit(1)
+          })
+      }
+    }
+
+    generator = path.resolve(__dirname, `./generators/updates/install`)
+    await sao({ generator, outDir, logLevel: 2, config })
+      .run()
+      .catch((err) => {
+        console.trace(err)
+        process.exit(1)
+      })
   } else {
-    log('cannot upgrade this version. Please use --forcenew flag to force new install.', 'error')
-    process.exit(0)
+    generator = path.resolve(__dirname, './generators/new')
+    log(`Generating a new ripple project in ${outDir}`)
+    sao({ generator, outDir, logLevel: 2, config })
+      .run()
+      .catch((err) => {
+        console.trace(err)
+        process.exit(1)
+      })
   }
-} else {
-  generator = path.resolve(__dirname, './generators/new')
-  log(`Generating a new ripple project in ${outDir}`)
 }
 
-sao({ generator, outDir, logLevel: 2, config })
-  .run()
-  .catch((err) => {
-    console.trace(err)
-    process.exit(1)
-  })
+cli()