Today I Learned

5 posts about #javascript

Decrease bundle size by importing Lodash correctly

If you use just one or a few Lodash functions in a file, try importing them directly from their respective files, one by one.

import _ from 'lodash'; // bad - 70.5K (gzipped: 24.4K)
import { has } from 'lodash'; // bad - 70.5K (gzipped: 24.4K)

import has from 'lodash/has'; // good - 9K (gzipped: 2.7K)

Alternatively, one can use babel-plugin-lodash or lodash-es. These packages come with sets of restrictions though.

It is worth noting that mixing these 2 import styles will cause the net gain to be negative. Basically, it will import the entire lodash + individual utilities twice. So, for this to be effective, the ‘good’ pattern needs to be enforced everywhere across the codebase.

Further reading

Another way to use absolute paths in js 'require'

consider following files structure:

...
▾ helpers/
    timeHelper.js
    timeHelper.test.js
▾ services/
    handleSlackCommand.js
    handleSlackCommand.test.js
  index.js
  package.json
  ...

in the package.json add:

{
  ...
  "dependencies": {
    "dotenv": "^6.2.0",
    "express": "^4.16.4",
    ...
    "helpers": "file:helpers", <-- this line
  },
}

now in the services/handleSlackCommand.js I can use

const { whatever } = require('helpers/timeHelper');

instead of

const { whatever } = require('../helpers/timeHelper');

How to add autoprefixer in webpack

Firstly we need to add this to our project using yarn/npm.

So yarn add autoprefixer.

After a successful installation, we need to declare which browsers we wanna use for our autoprefixer.

To declare that, we need to add to our packages.json file a few lines:

“browserslist”: [
   “> 1%“,
   “last 2 versions”
 ],

here, we can set something else (https://github.com/browserslist/browserslist#queries)

After that, we need to configure the webpack config file (ie. webpack.config.js).

Firstly we require autoprefixer and we’re setting this as a variable (somewhere on the beginning of the file)

const autoprefixer = require('autoprefixer');

!important:

| We need to add postcss-loader loader between css-loader and sass-loader.

use: ['css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer()]
              }
            },
            'sass-loader'],

if we have more loaders it could look like that:

  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [autoprefixer()]
              }
            },
            'sass-loader'],
        }),
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        }),
      },
      {
        test: /\.js/,
        use: ['babel-loader?cacheDirectory'],
        exclude: /node_modules/,
      },
    ],
  },

Now, we need to restart the server and you can enjoy working autoprefixer :)