DEV Community: Radonirina Maminiaina

Let Obfuscate it. (Reducing html size)

Radonirina Maminiaina — Fri, 19 Mar 2021 10:03:54 +0000

Intro

You can download the source code here
If you want your website to be indexed by Google search engine, you must optimize your code and your website should load as fast as possible (Not more than 3s according to this article).

Minify and gzip come to rescue

The first solution is to minify your assets as html, css, javascript, images. (You can use tools to proceed minify, e.g: html-minify for html)
You can use gzip to compress statics assets using your favorite server such as nginx, node, or apache.

Let reduce our html use obfuscate technic

If you inspect google or facebook source page you can see that their classnames are unreadable.
Because if you use long classname, your html will have a big size too. Therefore, it will impact your page loading.
Then, we can deduct that minify is good but not enough.

Here come obfuscate

Before we start, you should have a minimum knowledge of webpack, you should have css-loader.
Along this article, I use nuxt for example, but you can use React or Angular.

After, creating a nuxt app we should modify our build object into nuxt.config.js.
Add the following line:

build: {
    loaders: {
      css: {
        modules: {
          localIdentName:
            process.env.NODE_ENV === 'development'
              ? '[local]_[hash:base64:5]'
              : '[hash:base64:5]',
        },
      },
    },
  },

And within your index.vue for instance, add the following css:

<template>
<h1 :class="$style.articleTitle">Let obfuscate it</h1>
</template>

<style module>
.articleTitle {
    color: red;
}
</style>

Now, start the application with yarn dev or npm run dev and open it in your favorite browser. Inspect the page and you should have something like this:

Let build the web app with yarn build or npm run build and run yarn start or npm run start. Now, inspect the page, and see the result.

Oops, it doesn't work. 😥
Apparently, overriding build.loaders.css is not the solution.
So, how can we do that? 🔥🔥🔥

Let use extend to do it manually.

Extend the webpack configuration manually for the client & server bundles.

Use extend manually to do obfuscate

Remove loader and add the following code within your build property.

   extend(config, { isClient }) {
      if (isClient) {
        const cssLoader = config.module.rules.find((rule) => {
          return rule.test.toString() === '/\\.css$/i'
        })
        cssLoader.oneOf = cssLoader.oneOf.map((loader) => {
          loader.use = loader.use.map((item) => {
            if (item.options.modules) {
              if (process.env.NODE_ENV === 'production') {
                item.options.modules.localIdentName = '[hash:base64:5]'
              }
            }
            return item
          })
          return loader
        })
      }
    },
  }

Rebuild your app and run the browser again. And voilà, it works perfectly 🎉🎉🎉.
Inspect your page and see the result

We can go further for smaller classnames 🙌...

I found this article which talk about reducing classnames, so let use it in our code.
In the root of your project, create a new file getLocalIdent.js:

import incstr from 'incstr'

// region CSS Scope Minify
const createUniqueIdGenerator = () => {
  const index = {}

  const generateNextId = incstr.idGenerator({
    alphabet: 'abcdefghijklmnopqrstuvwxyz0123456789_-',
  })

  return (name) => {
    if (index[name]) {
      return index[name]
    }

    let nextId

    do {
      // Class name cannot start with a number.
      nextId = generateNextId()
    } while (/^[0-9_-]/.test(nextId))

    index[name] = generateNextId()
    // console.log(`${name} has id = ${index[name]}`);

    return index[name]
  }
}

const idLocal = createUniqueIdGenerator()
const idComponent = createUniqueIdGenerator()
const generateScopedName = (localName, resourcePath) => {
  const componentName = resourcePath.split('/').slice(-2).join('/')
  return idComponent(componentName) + idLocal(localName)
}

const getLocalIdent = (context, _localIdentName, localName) =>
  generateScopedName(localName, context.resourcePath)

export default getLocalIdent

(Make sure you installed incstr)

Now, let use it in our nuxt.config.js:

import getLocalIdent from './getLocalIdent'
export default {
 // another config
 build: {
    extend(config) {
      const cssLoader = config.module.rules.find((rule) => {
        return rule.test.toString() === '/\\.css$/i'
      })
      cssLoader.oneOf = cssLoader.oneOf.map((loader) => {
        loader.use = loader.use.map((item) => {
          if (item.options.modules) {
            if (process.env.NODE_ENV === 'production') {
              item.options.modules.getLocalIdent = getLocalIdent
            }
          }
          return item
        })
        return loader
      })
    },
  },
}

Rebuild again, and run the browser and see the result.

Conclusion

You can reduce your html file size using this technic, and combined to another technics, your web page will load more and more faster.

Here the git url of this article.
For more advanced nuxt concept, please read my previous article

Thanks for reading. 😊

Nuxt like a pro. Use service pattern (My Best practice)

Radonirina Maminiaina — Mon, 15 Mar 2021 19:17:19 +0000

Intro

We all know that NuxtJS is an awesome framework. Unlike Angular which has a well structured folder for services, nuxt doesn't. But like every good nuxt developer, using services are essential, especially when you use VueX with NuxtJS.

Implementation of services in Nuxt

Before we implement services, make sure you have vuex, nuxtjs/axios installed in your project.

Into the plugins directories, create a new file (e.g: service.js)

export default ({$axios}, inject) => {
  inject('getProductList', async (params) => await $axios.get('cool_get_url', {
    params
  }))
  inject('createProduct', async (data) => await $axios.post('cool_post_url', data))
  // ... and so on
}

So, in our Nuxt Component, we can access those service within the context this.

<template>
  <div><!-- Make a liste of product--></div>
</template>

<script>
  export default {
    name: 'MyAwesomeProduct',
    async mounted() {
      // accessing $getProductList service using this
      const { data } = this.$getProductList({type: 'awesome type'})

      // accessing $createProduct service
      const { data } = this.$createProduct({
        name: 'awesome product'
      })

    }
  }
</script>

Or if your system is more complicated, and you use vuex, you can access those service within vuex store as well.

export default {
  // some basic store configuration
  actions: {
    async getProductList({ commit }) {
      const { data } = this.$getProductList({type: 'awesome type'})
      // data manipulation before commit ...
      commit('MY_AWESOME_MUTATION', data)
    },
    async createProduct({ commit }) {
      const { data } = this.$createProduct({type: 'awesome type'})
      // data manipulation before commit ...
      commit('MY_AWESOME_MUTATION', data)
    },
  }
}

And within your component, you can use MapGetters to retrieve data after calling the action using MapActions

Let refactor the code, My Best Practice

Now, time is coming, so let rewrite those services.
In the root of your project, you can create a folder called services, and within that folder, create a new file named product.js (If you like, you can prefix it with service 😉 ). Here the content of that file:

export default ($axios) => {
  return {
     getProductList: async  (params) => {
        return await $axios.get('cool_get_url', {
           params
        })
     },
     createProduct: async  (data) => {
        return await $axios.post('cool_post_url', data)
     }
     // more verbs and more actions
  }
}

Now, the file [service.js] within the plugins will look like this:

import productService from '~/services/product'

export default ({ $axios }, inject) => {
  const allMethods = {
    ...productService($axios),
    // import another service here
  }
  const methods = Object.keys(allMethods)
  methods.forEach((method) => {
    inject(method, allMethods[method])
  })
}

We know that Object.keys(allMethods) will return the keys of allMethods, and then, we use those key, as the name of our services, and allMethods[method] will return the methods within the services.
Now inject will contains small code, and it's more clear.
Our services are separated in new file.

Pros

Separation of concern
Clean code
Easy for e2e testing
Easy for unit testing

Cons

More files to handle
(Put in comments if you find another cons with this approach)

Now for deployment you can read this article which is about optimisation.

Note: I repeat it again, it's my own best practice that I use for any of our projects. If you find it usefull, feel free to use it. 😇