Bundle and compress images with Webpack (#49)

* First pass at image loader * Clean up config, convert some images as example.
2017-07-14 13:04:08 -04:00 · 2017-07-14 13:04:08 -04:00 · c9948626d1
parent 780f3ba94f
commit c9948626d1
7 changed files with 73 additions and 43 deletions
--- a/common/components/BalanceSidebar/TokenRow.jsx
+++ b/common/components/BalanceSidebar/TokenRow.jsx
@ -3,6 +3,7 @@ import React from 'react';
 import Big from 'big.js';
 import translate from 'translations';
 import { formatNumber } from 'utils/formatters';
+import removeIcon from 'assets/images/icon-remove.svg';

 export default class TokenRow extends React.Component {
  props: {
@ -17,6 +18,7 @@ export default class TokenRow extends React.Component {
  };
  render() {
    const { balance, symbol, custom } = this.props;
+    const { showLongBalance } = this.state;
    return (
      <tr>
        <td
@ -26,13 +28,13 @@ export default class TokenRow extends React.Component {
        >
          {!!custom &&
            <img
-              src="images/icon-remove.svg"
+              src={removeIcon}
              className="token-remove"
              title="Remove Token"
              onClick={this.onRemove}
            />}
          <span>
-            {this.state.showLongBalance ? balance.toString() : formatNumber(balance)}
+            {showLongBalance ? balance.toString() : formatNumber(balance)}
          </span>
        </td>
        <td>
--- a/common/components/Footer/index.jsx
+++ b/common/components/Footer/index.jsx
@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import translate, { getTranslators } from 'translations';
 import { donationAddressMap } from 'config/data';
+import logo from 'assets/images/logo-myetherwallet.svg';

 export default class Footer extends Component {
  render() {
@ -13,14 +14,11 @@ export default class Footer extends Component {
              <div className="col-sm-3 footer-1">
                <p aria-hidden="true">
                  <a href="/">
-                    {/* TODO - don't hardcode image path*/}
                    <img
-                      src={
-                        'https://www.myetherwallet.com/images/logo-myetherwallet.svg'
-                      }
+                      src={logo}
                      height="55px"
                      width="auto"
-                      alt="Ether Wallet"
+                      alt="MyEtherWallet"
                    />
                  </a>
                </p>
@ -46,24 +44,24 @@ export default class Footer extends Component {
                <br />
              </div>
              <div className="col-sm-6 footer-2">
-                <h5><i aria-hidden="true">💝</i>{translate('FOOTER_2')}</h5>
+                <h5>
+                  <i aria-hidden="true">💝</i>
+                  {translate('FOOTER_2')}
+                </h5>
                <ul>
                  <li>
                    {' '}ETH:{' '}
-                    <span className="mono wrap">
-                      {donationAddressMap.ETH}
-                    </span>
+                    <span className="mono wrap">{donationAddressMap.ETH}</span>
                  </li>
                  <li>
                    {' '}BTC:{' '}
-                    <span className="mono wrap">
-                      {donationAddressMap.BTC}
-                    </span>
+                    <span className="mono wrap">{donationAddressMap.BTC}</span>
                  </li>
                </ul>

                <h5>
-                  <i aria-hidden="true">👫</i>{translate('ADD_Warning_1')}
+                  <i aria-hidden="true">👫</i>
+                  {translate('ADD_Warning_1')}
                </h5>
                <p>Consider using our affiliate links to...</p>
                <ul>
@ -73,8 +71,7 @@ export default class Footer extends Component {
                      href="https://bity.com/af/jshkb37v"
                      target="_blank"
                    >
-                      Swap ETH/BTC/EUR/CHF via
-                      Bity.com
+                      Swap ETH/BTC/EUR/CHF via Bity.com
                    </a>
                  </li>
                  <li>
@ -82,9 +79,7 @@ export default class Footer extends Component {
                      href="https://www.ledgerwallet.com/r/fa4b?path=/products/"
                      target="_blank"
                    >
-                      Buy
-                      a
-                      Ledger Nano S
+                      Buy a Ledger Nano S
                    </a>
                  </li>
                  <li>
@ -92,8 +87,7 @@ export default class Footer extends Component {
                      href="https://trezor.io/?a=myetherwallet.com"
                      target="_blank"
                    >
-                      Buy a
-                      TREZOR
+                      Buy a TREZOR
                    </a>
                  </li>
                </ul>
@ -106,13 +100,17 @@ export default class Footer extends Component {
                  <ul>
                    <li>
                      {translators.map(key =>
-                        <span key={key}>{translate(key)}</span>
+                        <span key={key}>
+                          {translate(key)}
+                        </span>
                      )}
                    </li>
                  </ul>}
              </div>
              <div className="col-sm-3 footer-3">
-                <h5><i aria-hidden="true">🌎</i> On the Web</h5>
+                <h5>
+                  <i aria-hidden="true">🌎</i> On the Web
+                </h5>
                <ul>
                  <li>
                    <a
@ -170,7 +168,9 @@ export default class Footer extends Component {
                  </li>
                </ul>

-                <h5><i aria-hidden="true">🙏</i> Support</h5>
+                <h5>
+                  <i aria-hidden="true">🙏</i> Support
+                </h5>
                <ul>
                  <li>
                    <a
@ -187,8 +187,7 @@ export default class Footer extends Component {
                      href="https://github.com/kvhnuke/etherwallet/issues"
                      target="_blank"
                    >
-                      Github
-                      Issue
+                      Github Issue
                    </a>
                  </li>
                </ul>
--- a/common/components/Header/index.jsx
+++ b/common/components/Header/index.jsx
@ -4,6 +4,7 @@ import TabsOptions from './components/TabsOptions';
 import { Link } from 'react-router';
 import { Dropdown } from 'components/ui';
 import { languages, NODES } from '../../config/data';
+import logo from 'assets/images/logo-myetherwallet.svg';

 export default class Header extends Component {
  props: {
@ -25,15 +26,7 @@ export default class Header extends Component {
        <section className="bg-gradient header-branding">
          <section className="container">
            <Link to={'/'} className="brand" aria-label="Go to homepage">
-              {/* TODO - don't hardcode image path*/}
-              <img
-                src={
-                  'https://www.myetherwallet.com/images/logo-myetherwallet.svg'
-                }
-                height="64px"
-                width="245px"
-                alt="MyEtherWallet"
-              />
+              <img src={logo} height="64px" width="245px" alt="MyEtherWallet" />
            </Link>
            <div className="tagline">
              <span style={{ maxWidth: '395px' }}>
--- a/package.json
+++ b/package.json
@ -54,6 +54,7 @@
    "friendly-errors-webpack-plugin": "^1.4.0",
    "glob": "^7.1.1",
    "html-webpack-plugin": "^2.28.0",
+    "image-webpack-loader": "^3.3.1",
    "isomorphic-style-loader": "^1.1.0",
    "jest": "^19.0.2",
    "less": "^2.7.2",
--- a/webpack_config/config.js
+++ b/webpack_config/config.js
@ -20,5 +20,23 @@ module.exports = {
  babel: {
    babelrc: true
  },
-  cssModules: false
+  // Settings for webpack-image-loader image compression
+  imageCompressionOptions: {
+    optipng: {
+      optimizationLevel: 4
+    },
+    gifsicle: {
+      interlaced: false
+    },
+    mozjpeg: {
+      quality: 80
+    },
+    svgo: {
+      plugins: [
+        { removeViewBox: true },
+        { removeEmptyAttrs: false },
+        { sortAttrs: true }
+      ]
+    }
+  }
 };
--- a/webpack_config/webpack.base.js
+++ b/webpack_config/webpack.base.js
@ -51,12 +51,29 @@ module.exports = {
        exclude: [/node_modules\/(?!ethereum-blockies)/]
      },
      {
-        test: /\.(ico|jpg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
+        test: /\.(ico|webp|eot|otf|ttf|woff|woff2)(\?.*)?$/,
        loader: 'file-loader?limit=100000'
      },
      {
-        test: /\.svg$/,
-        loader: 'file-loader'
+        test: /\.(gif|png|jpe?g|svg)$/i,
+        loaders: [
+          {
+            loader: 'file-loader',
+            query: {
+              hash: 'sha512',
+              digest: 'hex',
+              name: '[path][name].[ext]?[hash:6]'
+            }
+          },
+          {
+            loader: 'image-webpack-loader',
+            query: config.imageCompressionOptions
+          }
+        ]
+      },
+      {
+        test: /\.(ico|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
+        loader: 'file-loader?limit=100000'
      }
    ]
  },
--- a/webpack_config/webpack.dev.js
+++ b/webpack_config/webpack.dev.js
@ -9,15 +9,15 @@ base.devtool = 'source-map';
 base.module.loaders.push(
  {
    test: /\.css$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
+    loaders: ['style-loader', 'css-loader']
  },
  {
    test: /\.scss$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
+    loaders: ['style-loader', 'css-loader', 'sass-loader']
  },
  {
    test: /\.less$/,
-    loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'less-loader']
+    loaders: ['style-loader', 'css-loader', 'less-loader']
  }
 );