Zmniejsz rozmiar interfejsu

Jak za pomocą pakietu internetowego zmniejszyć aplikację do rozmiaru

Ivan Akulov

Jedną z pierwszych rzeczy, jakie należy zrobić przy optymalizacji aplikacji, jest jej jak najmniejszy rozmiar. Oto jak to zrobić w pakiecie internetowym.

Użyj trybu produkcyjnego (tylko pakiet webpack 4)

Webpack 4 wprowadził nowy parametr mode. Możesz ustawić tę flagę na 'development' lub 'production', aby wskazać, że kompilujesz aplikację dla konkretnego środowiska:

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

Podczas tworzenia aplikacji w wersji produkcyjnej włącz tryb production. Dzięki temu pakiet internetowy będzie stosować optymalizacje, takie jak minifikacja, usuwanie z bibliotek kodu tylko dla programistów, i inne.

Więcej informacji

• Co konkretnie konfiguruje flaga mode

Włącz minifikację

Uwaga: większość z nich dotyczy tylko pakietu Webpack 3. Jeśli używasz pakietu internetowego 4 w trybie produkcyjnym, minifikacja na poziomie pakietu jest już włączona – musisz tylko włączyć opcje dotyczące programu wczytującego.

Zmniejszenie polega na skompresowaniu kodu poprzez usunięcie dodatkowych spacji, skrócenie nazw zmiennych itp. W ten sposób:

// 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 obsługuje 2 sposoby kompresji kodu: kompresję na poziomie pakietu i opcje związane z ładowarką. Należy ich używać jednocześnie.

Minimalizacja na poziomie pakietu

Kompilacja na poziomie pakietu kompresuje cały pakiet po skompilowaniu. Działa to w następujący sposób:

1. Kod wygląda tak:

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

2. Webpack kompiluje go do mniej więcej takiego kodu:

   // 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!');
   }
   

3. Narzędzie do kompresji danych kompresuje je w ten sposób:

   // 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)
   

W pakiecie internetowym 4 minifikacja na poziomie pakietu jest włączona automatycznie – zarówno w trybie produkcyjnym,jak i bez niego. Wykorzystuje w nim minifier UglifyJS. Jeśli kiedykolwiek zechcesz wyłączyć minifikację, użyj trybu programisty lub przekaż false do opcji optimization.minimize.

W pakiecie webpack 3 musisz bezpośrednio użyć wtyczki UglifyJS. Do wtyczki jest dołączony pakiet internetowy. Aby go włączyć, dodaj go do sekcji plugins konfiguracji:

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

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

Uwaga: w pakiecie webpack 3 wtyczka UglifyJS nie może skompilować kodu ES2015+ (ES6+). Oznacza to, że jeśli Twój kod używa klas, funkcji strzałek lub innych nowych funkcji języka, a nie skompilujesz ich w wersji ES5, wtyczka zwróci błąd.

Jeśli chcesz skompilować nową składnię, użyj pakietu uglifyjs-webpack-plugin. To ta sama wtyczka do pakietu z pakietem webpack, ale nowsza, która umożliwia skompilowanie kodu ES2015+.

Opcje dotyczące modułu ładowania

Drugim sposobem na zminimalizowanie kodu są opcje dla konkretnego narzędzia (co to jest program ładujący). Opcje loadera umożliwiają kompresowanie elementów, których nie można zminifikować za pomocą minifikatora. Jeśli na przykład importujesz plik CSS za pomocą css-loader, plik jest skompilowany w ciąg znaków:

/* 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}",""]);

Kompaktor nie może skompresować tego kodu, ponieważ jest to ciąg znaków. Aby zminimalizować zawartość pliku, musimy skonfigurować loader w ten sposób:

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

Więcej informacji

• Dokumentacja UglifyJsPlugin
• Inne popularne narzędzia do kompresji: Babel Minify, Google Closure Compiler.

Określ NODE_ENV=production

Uwaga: dotyczy to tylko webpacka 3. Jeśli używasz webpacka 4 w trybie produkcyjnym, optymalizacja NODE_ENV=production jest już włączona, więc możesz pominąć tę sekcję.

Innym sposobem zmniejszenia rozmiaru interfejsu jest ustawienie NODE_ENV zmiennej środowiskowej w kodzie na wartość production.

Biblioteki odczytują zmienną NODE_ENV, aby określić, w którym trybie powinny działać – w wersji deweloperskiej czy produkcyjnej. Niektóre biblioteki działają inaczej w zależności od tej zmiennej. Jeśli na przykład NODE_ENV nie ma wartości production, Vue.js wykonuje dodatkowe sprawdzanie i wyświetla ostrzeżenia:

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

React działa podobnie – wczytuje kompilację deweloperską, która zawiera ostrzeżenia:

// 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.'
);
// …

Takie kontrole i ostrzeżenia zwykle nie są potrzebne w wersji produkcyjnej, ale pozostają w kodzie i zwiększają rozmiar biblioteki. W webpack 4 usuń je, dodając opcję optimization.nodeEnv: 'production':

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

W pakiecie webpack 3 zamiast tego użyj 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()
  ]
};

Zarówno opcja optimization.nodeEnv, jak i DefinePlugin działają w taki sam sposób – zastępują wszystkie wystąpienia ciągu process.env.NODE_ENV określonymi wartościami. W przypadku konfiguracji z powyższego przykładu:

1. Webpack zastąpi wszystkie wystąpienia ciągu process.env.NODE_ENV ciągiem "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.');
   }
   

2. Następnie minifier usuwa wszystkie takie gałęzie if, ponieważ "production" !== 'production' ma zawsze wartość fałsz, a wtyczka rozumie, że kod zawarty w tych gałęziach nigdy nie zostanie wykonany:

   // 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 };
   }
   

Więcej informacji

• Co to są „zmienne środowiskowe”
• Dokumentacja Webpacka: DefinePlugin, EnvironmentPlugin

Korzystanie z modułów ES

Innym sposobem na zmniejszenie rozmiaru interfejsu jest użycie modułów ES.

Gdy używasz modułów ES, webpack może wykonywać usuwanie drzewa. Wyodrębnianie drzewa polega na przeszukiwaniu przez pakiet całego drzewa zależności, sprawdzaniu, które zależności są używane, i usuwaniu nieużywanych. Jeśli więc używasz składni modułu ES, webpack może wyeliminować nieużywany kod:

1. Zapisujesz plik z wieloma eksportami, ale aplikacja używa tylko jednego z nich:

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

2. Webpack rozumie, że commentRestEndpoint nie jest używany i nie generuje osobnego punktu eksportu w pakiecie:

   // 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 */
   })
   

3. Minifikator usuwa nieużywaną zmienną:

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

Działa to nawet w przypadku bibliotek, jeśli są one napisane za pomocą modułów ES.

Uwaga: w pakiecie internetowym nie uda się potrząsać drzewami bez minifikatora. Webpack usuwa tylko instrukcje eksportu, które nie są używane. Nieużywany kod usuwa z kolei narzędzie do kompresji. Jeśli więc skompilujesz pakiet bez minifikatora, nie zmniejszy się on.

Nie musisz jednak używać wbudowanego w webpacka narzędzia do kompresji (UglifyJsPlugin). Każdy minifilar, który obsługuje usuwanie martwego kodu (np. wtyczka Babel Minify lub Google Closure Compiler), wystarczy.

Ostrzeżenie: nie kompiluj przypadkowo modułów ES w ramach modułów CommonJS. Jeśli używasz Babel z usługami babel-preset-env lub babel-preset-es2015, sprawdź ustawienia tych wstępnie ustawionych wartości. Domyślnie transpilują one import i export ES na require i module.exports CommonJS. Aby wyłączyć tę funkcję, prześlij opcję { modules: false }. To samo z TypeScript: pamiętaj, aby ustawić { "compilerOptions": { "module": "es2015" } } w tsconfig.json.

Więcej informacji

• „ES6 Modules in depth”

• Dokumentacja Webpacka dotycząca potrząsania drzewem

Zoptymalizuj obrazy

Obrazy zajmują ponad połowę rozmiaru strony. Nie są one tak ważne jak JavaScript (np. nie blokują renderowania), ale i tak zużywają dużą część przepustowości. Użyj narzędzi url-loader, svg-url-loader i image-webpack-loader, aby je zoptymalizować w pakiecie internetowym.

url-loader wstawia małe pliki statyczne do aplikacji. Bez konfiguracji bierze przekazany plik, umieszcza go obok skompilowanego pakietu i zwraca adres URL tego pliku. Jeśli jednak określimy opcję limit, pliki mniejsze niż ten limit będą zakodowane jako adres URL danych w Base64 i zwrócą ten adres URL. W ten sposób obraz jest umieszczany w kodzie JavaScript i oszczędza żądanie 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`

Uwaga: obrazy wbudowane zmniejszają liczbę oddzielnych żądań, co jest korzystne (nawet w przypadku HTTP/2), ale wydłuża czas pobierania/analizy pakietu i pamięci. Nie umieszczaj w treści dużej liczby dużych obrazów, ponieważ zwiększy to czas tworzenia pakietu, co zniweczy korzyści płynące z umieszczania obrazów w treści.

svg-url-loader działa tak samo jak url-loader, z tą różnicą, że koduje pliki za pomocą kodowania URL zamiast Base64. Jest to przydatne w przypadku obrazów SVG, ponieważ pliki SVG to tylko zwykły tekst, a więc takie kodowanie pozwala zmniejszyć rozmiar.

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

Uwaga: moduł svg-url-loader zawiera opcje, które poprawiają obsługę w Internet Explorerze, ale pogarszają wstawianie w innych przeglądarkach. Jeśli chcesz obsługiwać tę przeglądarkę, zastosuj opcję iesafe: true.

image-webpack-loader kompresuje obrazy, które przechodzą przez niego. Plik obsługuje obrazy JPG, PNG, GIF i SVG, więc będziemy go używać we wszystkich tych formatach.

Ten program ładujący nie umieszcza obrazów w aplikacji, dlatego musi działać w parze z url-loader i svg-url-loader. Aby uniknąć kopiowania go i wklejania do obu reguł (jednej dla obrazów JPG/PNG/GIF i drugiej dla obrazów SVG), dodamy ten moduł ładujący jako osobną regułę z 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'
      }
    ]
  }
};

Możesz już zacząć korzystać z domyślnych ustawień programu wczytującego, ale jeśli chcesz skonfigurować je bardziej szczegółowo, sprawdź opcje wtyczki. Aby wybrać opcje, zapoznaj się ze świetnym przewodnikiem Addy Osmaniego na temat optymalizacji obrazów.

Więcej informacji

• „Do czego służy kodowanie base64?”
• Przewodnik Addy Osmani na temat optymalizacji obrazów

Optymalizacja zależności

Ponad połowa średniego rozmiaru kodu JavaScript zależy od zależności, a część tego rozmiaru może być po prostu zbędna.

Na przykład Lodash (w wersji 4.17.4) dodaje do pakietu 72 KB skompresowanego kodu. Jeśli jednak zastosujesz tylko 20 metod, ok. 65 KB zminifikowanego kodu nie będzie działać.

Innym przykładem jest plik Moment.js. Wersja 2.19.1 zajmuje 223 KB skompresowanego kodu, co jest ogromną wartością – średni rozmiar kodu JavaScript na stronie w październiku 2017 r. wynosił 452 KB. Jednak 170 KB tego rozmiaru to pliki lokalizacji. Jeśli nie używasz Moment.js w wielu językach, te pliki będą niepotrzebnie zwiększać rozmiar pakietu.

Wszystkie te zależności można łatwo zoptymalizować. Zebraliśmy w repozytorium GitHub metody optymalizacji – zapoznaj się z nim.

Włączanie konkatenacji modułów w przypadku modułów ES (inaczej nazywane rozszerzanie zakresu)

Uwaga: jeśli używasz pakietu Webpack 4 w trybie produkcyjnym, konkatenacja modułów jest już włączona. Możesz pominąć tę sekcję.

Podczas tworzenia pakietu pakiet internetowy opakowuje każdy moduł w jedną funkcję:

// 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!');
  }
})

Wcześniej było to konieczne, aby oddzielić od siebie moduły CommonJS/AMD. Wiąże się to jednak ze wzrostem rozmiaru i wydajności każdego modułu.

Webpack 2 obsługuje moduły ES, które w odróżnieniu od modułów CommonJS i AMD mogą być grupowane bez owijania każdego z nich w funkcje. Pakowanie to jest możliwe dzięki konkatenacji modułów w webpack 3. Konkatenacja modułów polega na:

// 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();
})

Widzisz różnicę? W zwykłym pakiecie moduł 0 wymagał render z modułu 1. W przypadku konkatenacji modułów element require jest po prostu zastępowany wymaganą funkcją, a moduł 1 zostaje usunięty. Pakiet składa się z mniejszej liczby modułów i mniejszego nakładu pracy.

Aby włączyć to zachowanie, w webpack 4 włącz opcję optimization.concatenateModules:

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

W webpack 3 użyj ModuleConcatenationPlugin:

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

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

Uwaga: zastanawiasz się, dlaczego to zachowanie nie jest domyślnie włączone? Łączenie modułów jest fajne, ale wydłuża czas kompilacji i przerywa działanie modułów w czasie aktualizacji. Dlatego należy je włączać tylko w wersji produkcyjnej.

Więcej informacji

• Dokumentacja Webpack dla wtyczki ModuleConcatenationPlugin
• „Krótki wstęp do podnoszenia zakresu”
• Szczegółowy opis działania tej wtyczki.

Użyj kodu externals, jeśli masz zarówno kod pakietu internetowego, jak i innego

Możesz mieć duży projekt, w którym część kodu jest kompilowana za pomocą webpack, a część nie. Podobnie jak w przypadku witryny hostującej filmy, w której widżet odtwarzacza może być utworzony za pomocą pakietu webpack, a otaczająca go strona nie może:

(całkowicie losowa witryna z filmami)

Jeśli oba fragmenty kodu mają wspólne zależności, możesz je udostępnić, aby uniknąć wielokrotnego pobierania ich kodu. Jest to możliwe dzięki opcji externals w webpacku – zastępuje ona moduły zmiennymi lub innymi importami zewnętrznymi.

Jeśli zależności są dostępne w window

Jeśli kod niebędący kodem Webpacka korzysta z zależności dostępnych jako zmienne w window, użyj aliasów nazw zależności do nazw zmiennych:

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

W tej konfiguracji webpack nie będzie łączyć pakietów react i react-dom. Zamiast tego zostaną one zastąpione przez takie dane:

// 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;
})

Jeśli zależności są wczytywane jako pakiety AMD

Jeśli kod niebędący kodem webpack nie udostępnia zależności do window, sytuacja jest bardziej skomplikowana. Możesz jednak uniknąć wczytywania tego samego kodu dwukrotnie, jeśli kod niebędący kodem webpacka używa tych zależności jako pakietów AMD.

W tym celu skompiluj kod pakietu internetowego jako pakiet AMD i moduły aliasów dla adresów URL bibliotek:

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

Webpack spakuje pakiet do define() i spowoduje, że będzie on zależeć od tych adresów URL:

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

Jeśli kod inny niż webpack używa tych samych adresów URL do wczytywania zależności, pliki zostaną załadowane tylko raz – dodatkowe żądania będą korzystać z pamięci podręcznej programu ładującego.

Uwaga: pakiet internetowy zastępuje tylko te importy, które dokładnie odpowiadają kluczom obiektu externals. Oznacza to, że jeśli wpiszesz import React from 'react/umd/react.production.min.js', ta biblioteka nie zostanie wykluczona z pakietu. Jest to rozsądne – pakiet internetowy nie wie, czy import 'react' i import 'react/umd/react.production.min.js' to to samo, więc zachowaj ostrożność.

Więcej informacji

• Dokumentacja Webpack na stronie externals

Podsumowanie

• Jeśli używasz webpacka 4, włącz tryb produkcyjny.
• Minimalizowanie kodu za pomocą opcji kompresora i ładowarki na poziomie pakietu
• Usuń kod przeznaczony tylko do celów testowych, zastępując NODE_ENV wartością production
• Użyj modułów ES, aby umożliwić potrząsanie drzewem
• Kompresowanie obrazów
• Zastosuj optymalizacje dostosowane do zależności
• Włącz konkatenację modułów
• Jeśli uważasz, że to może być przydatne, użyj metody externals