このページは Cloud Translation API によって翻訳されました。

フロントエンドのサイズを縮小する

webpack を使用してアプリを可能な限り小さくする方法

Ivan Akulov

アプリケーションを最適化する際に最初に行うべきことは、アプリケーションを考えていますWebpack でこれを行う方法は次のとおりです。

本番環境モードを使用する（webpack 4 のみ）

Webpack 4 では、新しい mode フラグが導入されました。たとえば、このフラグを 'development' または 'production' に設定して、作成中の Webpack のヒントにします。適用するにはどうすればよいでしょうか。

// webpack.config.js
module.exports = {
  mode: 'production',
};

本番環境用にアプリを作成する場合は、production モードを必ず有効にしてください。これにより、webpack は圧縮や開発専用コードの削除などの最適化を適用します。など

圧縮を有効にする

圧縮とは、余分なスペースを削除し、変数名を短縮して、コードを圧縮することです。できます。この場合、次のように指定します。

// Original code
function map(array, iteratee) {
  let index = -1;
  const length = array == null ? 0 : array.length;
  const result = new Array(length);

  while (++index < length) {
    result[index] = iteratee(array[index], index, array);
  }
  return result;
}

↓

// Minified code
function map(n,r){let t=-1;for(const a=null==n?0:n.length,l=Array(a);++t<a;)l[t]=r(n[t],t,n);return l}

Webpack では、コードを圧縮する方法が 2 つあります。バンドルレベルの圧縮と、 ローダ固有のオプション。これらは同時に使用する必要があります。

バンドルレベルの圧縮

バンドルレベルの圧縮では、コンパイル後にバンドル全体が圧縮されます。仕組みは次のとおりです。

次のようなコードを記述します。

// comments.js
import './comments.css';
export function render(data, target) {
  console.log('Rendered!');
}

Webpack はこれをおおむね次のようにコンパイルします。

// bundle.js (part of)
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["render"] = render;
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__comments_css_js___default =
__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__comments_css__);

function render(data, target) {
console.log('Rendered!');
}

圧縮は、圧縮ツールによっておおよそ次のように行われます。

// minified bundle.js (part of)
"use strict";function t(e,n){console.log("Rendered!")}
Object.defineProperty(n,"__esModule",{value:!0}),n.render=t;var o=r(1);r.n(o)

webpack 4 では、バンドルレベルの圧縮が自動的に有効になります（両本番環境でも）あります。UglifyJS ミニファイアを使用します。内部で動作します。（圧縮を無効にする必要がある場合は、開発モードを使用してください optimization.minimize オプションに false を渡すこともできます）。

webpack 3 では、UglifyJS プラグインを使用する必要があります。直接渡されます。プラグインは Webpack にバンドルされています。有効にするには、plugins に追加します。セクション内にあります。

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
  ],
};

ローダ固有のオプション

コードを圧縮する 2 つ目の方法は、ローダ固有のオプションです（です）。ローダーオプションを使用すれば、ローダーで圧縮できませんたとえば、Terraform で記述した CSS ファイルをインポートし、 css-loader の場合、ファイルは文字列にコンパイルされます。

/* comments.css */
.comment {
  color: black;
}

// minified bundle.js (part of)
exports=module.exports=__webpack_require__(1)(),
exports.push([module.i,".comment {\r\n  color: black;\r\n}",""]);

このコードは文字列であるため、圧縮ツールでは圧縮できません。ファイルの内容を圧縮するには、次のようにローダーを設定します。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { minimize: true } },
        ],
      },
    ],
  },
};

`NODE_ENV=production` を実行します。

注: これは webpack 3 のみです。本番環境モードで Webpack 4 を使用する場合、NODE_ENV=production の最適化はすでに有効になっています。このセクションはスキップしてかまいません。

フロントエンドサイズを小さくするもう 1 つの方法は、NODE_ENV を設定することです。環境変数値を production に設定します。

ライブラリは NODE_ENV 変数を読み取って、どのモードで動作するべきかを検出します。開発環境または本番環境のどちらかになります一部のライブラリは、この変数に基づいて動作が異なります。対象たとえば、NODE_ENV が production に設定されていない場合、Vue.js は追加のチェックを行って出力します。警告:

// vue/dist/vue.runtime.esm.js
// …
if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}
// …

React も同様に、警告を含む開発ビルドを読み込みます。

// react/index.js
if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

// react/cjs/react.development.js
// …
warning$3(
    componentClass.getDefaultProps.isReactClassApproved,
    'getDefaultProps is only used on classic React.createClass ' +
    'definitions. Use a static property named `defaultProps` instead.'
);
// …

このようなチェックや警告は、本番環境では通常は不要ですが、コードやライブラリのサイズを大きくします。webpack 4 の場合: 以下を追加して削除します。 optimization.nodeEnv: 'production' オプションを使用します。

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    nodeEnv: 'production',
    minimize: true,
  },
};

webpack 3 の場合は、代わりに DefinePlugin を使用します。

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.UglifyJsPlugin()
  ]
};

optimization.nodeEnv オプションと DefinePlugin はどちらも同じように機能します。すべての process.env.NODE_ENV が指定された値に置き換えられます。上記の config:

Webpack でのすべての process.env.NODE_ENV が次の内容に置き換えられます "production":

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if (process.env.NODE_ENV !== 'production') {
  warn('props must be strings when using array syntax.');
}

↓

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

次に、Minifier がすべての if 分岐 – "production" !== 'production' が常に false であるため、プラグインは、ブランチ内のコードが実行されないことを認識しています。

// vue/dist/vue.runtime.esm.js
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
} else if ("production" !== 'production') {
  warn('props must be strings when using array syntax.');
}

↓

// vue/dist/vue.runtime.esm.js (without minification)
if (typeof val === 'string') {
  name = camelize(val);
  res[name] = { type: null };
}

ES モジュールを使用する

フロントエンドのサイズを小さくする次の方法は、ES モジュールをご覧ください。

ES モジュールを使用すると、webpack でツリーシェイキングが行えるようになります。ツリーシェイキングとは、バンドラが依存関係ツリー全体を走査して、使用されている依存関係をチェックして、使用されていない依存関係を削除します。したがって、 ES モジュール構文を使用すると、webpack で使用されていないコードを削除できます。

複数のエクスポートを使用して 1 つのファイルを作成しましたが、アプリが使用するのはそのうちの 1 つだけです。

// comments.js
export const render = () => { return 'Rendered!'; };
export const commentRestEndpoint = '/rest/comments';

// index.js
import { render } from './comments.js';
render();

Webpack は、commentRestEndpoint が使用されていないことを認識し、エクスポートポイントとして、

// bundle.js (part that corresponds to comments.js)
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const render = () => { return 'Rendered!'; };
/* harmony export (immutable) */ __webpack_exports__["a"] = render;

const commentRestEndpoint = '/rest/comments';
/* unused harmony export commentRestEndpoint */
})

未使用の変数は、圧縮ツールによって削除されます。

// bundle.js (part that corresponds to comments.js)
(function(n,e){"use strict";var r=function(){return"Rendered!"};e.b=r})

これは、ライブラリが ES モジュールで記述されている場合でも機能します。

ただし、webpack に組み込まれている圧縮ツール（UglifyJsPlugin）を正確に使用する必要はありません。無効なコードの削除をサポートするすべての圧縮ツール（例: Babel Minify プラグイン）。または Google Closure Compiler Plugin を使用する）うまくいきます

警告: ES モジュールを誤って CommonJS にコンパイルしないでください。babel-preset-env または babel-preset-es2015 で Babel を使用している場合は、これらのプリセットの設定を確認してください。デフォルトでは、ES の import と export を CommonJS の require と module.exports にトランスパイルします。無効にするには、{ modules: false } オプションを渡します。TypeScript でも同様で、tsconfig.json で必ず { "compilerOptions": { "module": "es2015" } } を設定してください。

画像を最適化する

画像は表示されます。一方で、は JavaScript ほど重要ではなく（レンダリングをブロックしないなど）、依然として削減されます。url-loader、svg-url-loader、image-webpack-loader を使用して最適化使用します。

url-loader は、小さな静的ファイルを。設定しない場合は、渡されたファイルを受け取り、コンパイル済みのバンドルの次に配置して、そのファイルの URL を指定します。ただし、limit オプションを指定すると、 Base64 データ URL として指定し、この URL を返します。この画像を JavaScript コードにインライン化し、HTTP リクエストを保存します。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'url-loader',
        options: {
          // Inline files smaller than 10 kB (10240 bytes)
          limit: 10 * 1024,
        },
      },
    ],
  }
};

// index.js
import imageUrl from './image.png';
// → If image.png is smaller than 10 kB, `imageUrl` will include
// the encoded image: 'data:image/png;base64,iVBORw0KGg…'
// → If image.png is larger than 10 kB, the loader will create a new file,
// and `imageUrl` will include its url: `/2fcd56a1920be.png`

svg-url-loader は url-loader と同様に機能します。 URL でファイルをエンコードしている点が異なります。エンコードを行います。 1 です。これは SVG 画像に有用です。SVG ファイルは単なる書式なしテキストであるため、このエンコードはサイズ効果が高まります

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: "svg-url-loader",
        options: {
          limit: 10 * 1024,
          noquotes: true
        }
      }
    ]
  }
};

image-webpack-loader は、転送されるイメージをできます。JPG、PNG、GIF、SVG 形式の画像をサポートしているため、これらすべての形式にこれを使用します。

このローダはアプリに画像を埋め込まないため、url-loader および svg-url-loader。両方のルール（1 つは JPG / PNG / GIF 画像用、もう 1 つは JPG / PNG / GIF 画像用）にコピー&ペーストされないようにする SVG 用のローダー）、次のように enforce: 'pre' を使用して別のルールとして組み込みます。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'image-webpack-loader',
        // This will apply the loader before the other ones
        enforce: 'pre'
      }
    ]
  }
};

ローダのデフォルト設定はそのままで構いませんが、必要に応じて詳しくは、プラグインオプションをご覧ください。宛先指定するオプションを選択する、Addy Osmani の画像に関する優れたガイドを確認最適化します。

依存関係を最適化する

JavaScript の平均サイズの半分以上は依存関係に起因しており、その一部は依存関係に起因します。不要になるからです

たとえば、Lodash（v4.17.4 以降）は、圧縮された 72 KB のコードをバンドルに追加します。ただし、約 65 KB の圧縮コードは何もしません。

もう一つの例は、Moment.js です。その 2.19.1 バージョンには、223 KB の圧縮コードが必要です。これは巨大です。ページあたりの JavaScript の平均サイズは452 KB（10 月） 2017 年。ただし、そのサイズは 170 KB です。ローカライズです。ファイル。条件複数の言語で Moment.js を使用していない場合、これらのファイルはあります。

これらの依存関係はすべて簡単に最適化できます。このコースでは GitHub リポジトリ – 詳細

ES モジュールのモジュール連結（スコープホイスティング）を有効にする

バンドルをビルドする際、webpack は各モジュールを関数にラップします。

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// bundle.js (part  of)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
  var __WEBPACK_IMPORTED_MODULE_0__comments_js__ = __webpack_require__(1);
  Object(__WEBPACK_IMPORTED_MODULE_0__comments_js__["a" /* render */])();
}),
/* 1 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  __webpack_exports__["a"] = render;
  function render(data, target) {
    console.log('Rendered!');
  }
})

以前は、CommonJS/AMD のモジュールを互いに分離するために必要でした。ただし、これによりモジュールごとのサイズとパフォーマンスのオーバーヘッドを

Webpack 2 では ES モジュールのサポートが導入されました。これは、CommonJS や AMD モジュールとは異なり、ES モジュールをバンドルできます。関数でラップする必要はありません。Webpack 3 はこのようなバンドルを可能にし、モジュール連結。こちらのモジュール連結によって何が行われますか。

// index.js
import {render} from './comments.js';
render();

// comments.js
export function render(data, target) {
  console.log('Rendered!');
}

↓

// Unlike the previous snippet, this bundle has only one module
// which includes the code from both files

// bundle.js (part of; compiled with ModuleConcatenationPlugin)
/* 0 */
(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  Object.defineProperty(__webpack_exports__, "__esModule", { value: true });

  // CONCATENATED MODULE: ./comments.js
    function render(data, target) {
    console.log('Rendered!');
  }

  // CONCATENATED MODULE: ./index.js
  render();
})

違いを実感してください。プレーンバンドルでは、モジュール 0 はモジュール 1 の render を必要としていました。あり require は必要な関数に置き換え、モジュール 1 は削除されます。バンドルに含まれるモジュールは少なく、モジュールのオーバーヘッドも少なくなります。

この動作を有効にするには、webpack 4 で optimization.concatenateModules オプションを有効にします。

// webpack.config.js (for webpack 4)
module.exports = {
  optimization: {
    concatenateModules: true
  }
};

webpack 3 の場合: ModuleConcatenationPlugin を使用します。

// webpack.config.js (for webpack 3)
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

webpack コードと Webpack 以外のコードの両方がある場合は、`externals` を使用します。

大規模なプロジェクトで、一部のコードが webpack でコンパイルされ、一部のコードがコンパイルされていない場合があります。高評価プレーヤーウィジェットが webpack で構築されている可能性のある動画ホスティングサイトとその周辺ページ含まれない場合があります。

動画ホスティングサイトのスクリーンショット — （完全にランダムな動画ホスティングサイト）

両方のコードに共通の依存関係がある場合は、コードを共有することでコードのダウンロードを回避できます複数回失敗します。これは、Webpack の externals を使用して行います。オプションのメソッド - モジュールを変数または読み込みます。

`window` で依存関係を利用できる場合

webpack 以外のコードが、window で変数として利用可能な依存関係に依存している場合は、次のように、依存関係名を変数名に変換します。

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

この設定では、webpack は react パッケージと react-dom パッケージをバンドルしません。代わりに、次のように置き換えます。

// bundle.js (part of)
(function(module, exports) {
  // A module that exports `window.React`. Without `externals`,
  // this module would include the whole React bundle
  module.exports = React;
}),
(function(module, exports) {
  // A module that exports `window.ReactDOM`. Without `externals`,
  // this module would include the whole ReactDOM bundle
  module.exports = ReactDOM;
})

依存関係が AMD パッケージとして読み込まれるかどうか

webpack 以外のコードが window に依存関係を公開しない場合、状況はより複雑になります。ただし、webpack 以外のコードでこれらのコードが使用される場合は、同じコードを 2 回読み込むことは避けることができます。 AMD パッケージとして指定します。

そのためには、webpack コードを AMD バンドルとしてコンパイルし、モジュールをライブラリ URL にエイリアスとして指定します。

// webpack.config.js
module.exports = {
  output: {
    libraryTarget: 'amd'
  },
  externals: {
    'react': {
      amd: '/libraries/react.min.js'
    },
    'react-dom': {
      amd: '/libraries/react-dom.min.js'
    }
  }
};

Webpack はバンドルを define() にラップし、以下の URL に依存するようにします。

// bundle.js (beginning)
define(["/libraries/react.min.js", "/libraries/react-dom.min.js"], function () { … });

webpack 以外のコードが同じ URL を使用して依存関係を読み込む場合、これらのファイルが読み込まれます追加のリクエストにはローダのキャッシュが使用されます。

注: Webpack は、externals オブジェクトのキーと完全に一致するインポートのみを置き換えます。つまり、import React from 'react/umd/react.production.min.js' を作成しても、このライブラリはバンドルから除外されません。これは当然のことです。webpack は import 'react' と import 'react/umd/react.production.min.js' が同じものかどうか認識できないため、注意してください。

まとめ

webpack 4 を使用する場合は本番環境モードを有効にする
バンドルレベルの最小化ツールとローダのオプションを使用してコードを最小化する
NODE_ENV を production に置き換えて、開発専用のコードを削除します。
ES モジュールを使用してツリーシェイキングを有効にする
画像を圧縮する
依存関係固有の最適化を適用する
モジュールの連結を有効にする
必要に応じて externals を使用してください。

フロントエンドのサイズを縮小する

本番環境モードを使用する（webpack 4 のみ）

関連情報

圧縮を有効にする

バンドルレベルの圧縮

ローダ固有のオプション

関連情報

`NODE_ENV=production` を実行します。

関連情報

ES モジュールを使用する

関連情報

画像を最適化する

関連情報

依存関係を最適化する

ES モジュールのモジュール連結（スコープホイスティング）を有効にする

関連情報

webpack コードと Webpack 以外のコードの両方がある場合は、`externals` を使用します。

`window` で依存関係を利用できる場合

依存関係が AMD パッケージとして読み込まれるかどうか

関連情報

まとめ

フロントエンドのサイズを縮小する

本番環境モードを使用する（webpack 4 のみ）

関連情報

圧縮を有効にする

バンドルレベルの圧縮

ローダ固有のオプション

関連情報

NODE_ENV=production を実行します。

関連情報

ES モジュールを使用する

関連情報

画像を最適化する

関連情報

依存関係を最適化する

ES モジュールのモジュール連結（スコープ ホイスティング）を有効にする

関連情報

webpack コードと Webpack 以外のコードの両方がある場合は、externals を使用します。

window で依存関係を利用できる場合

依存関係が AMD パッケージとして読み込まれるかどうか

関連情報

まとめ

`NODE_ENV=production` を実行します。

ES モジュールのモジュール連結（スコープホイスティング）を有効にする

webpack コードと Webpack 以外のコードの両方がある場合は、`externals` を使用します。

`window` で依存関係を利用できる場合