Всем привет! За время работы с вебпаком у меня накопилось пару интересных советов, которые помогут подготовить идеально оптимизированное приложение.
Давайте начнем! 
1. Используйте fast-async вместо среды выполнения регенератора.
Обычно разработчики используют @babel/preset-env преобразовать весь современный синтаксис в ES5. С этой предустановкой конвейер преобразования асинхронной функции выглядит следующим образом: Исходная асинхронная функция -> Генератор -> Функция , с использованием время выполнения регенератора Пример 1. Оригинальная асинхронная функция
2. Генераторconst test = async () => { await fetch('/test-api/', { method: 'GET' }); }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).
then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
const test = (() => {
var _ref = _asyncToGenerator(function* () {
yield fetch('/test-api/', { method: 'GET' });
});
return function test() {
return _ref.apply(this, arguments);
};
})();
3. Функция с использованием среды выполнения регенератора
'use strict';
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).
then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
var test = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch('/test-api/', { method: 'GET' });
case 2:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
}));
return function test() {
return _ref.apply(this, arguments);
};
}();
С быстрая асинхронность конвейер упрощается до: Исходная асинхронная функция → Функция, использующая обещания Пример 1. Оригинальная асинхронная функция
const test = async () => {
await fetch('/test-api/', { method: 'GET' });
}
2. Функция, использующая промисы
var test = function test() {
return new Promise(function ($return, $error) {
return Promise.resolve(fetch('/test-api/', {
method: 'GET'
})).
then(function ($await_1) {
try {
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
};
Благодаря этому теперь у нас нет regenerator-runtime на клиенте и ненужных трансформационных оберток.
Чтобы добавить fast-async в свой проект, вам необходимо:
1. Установите его npm i fast-async
2. Обновите конфигурацию Babel // .
babelrc.js module.exports = { "presets": [ ["@babel/preset-env", { /* .
*/ "exclude": ["transform-async-to-generator", "transform-regenerator"] }] ], /* .
*/ "plugins": [ ["module:fast-async", { "spec": true }], /* .
*/
]
}
Для меня эта оптимизация уменьшила размер js-файлов на 3,2%.
Это мелочь, но приятно :)
2. Используйте свободные преобразования
Никаких специальных настроек @babel/preset-env пытается сгенерировать код, максимально приближенный к спецификации.Но скорее всего ваш код не так уж и плох и не использует все возможные крайние случаи спецификации ES6+.
Тогда все лишние накладные расходы можно устранить, включив свободные преобразования для Preset-env: // .
babelrc.js module.exports = { "presets": [ ["@babel/preset-env", { /* .
*/ "loose": true, }] ], /* .
*/
}
Пример того, как это работает, можно найти здесь .
В моем проекте это уменьшило размер пакета на 3,8%.
3. Настройте минификацию js и css вручную.
Настройки минификаторов по умолчанию содержат только те преобразования, которые не могут ничего сломать программисту.
Но мы любим создавать себе проблемы, правда? Попробуйте прочитать настройки js минификатор и ваш минификатор CSS (я использую cssnano ).
Изучив документацию, я сделал следующую конфигурацию: // webpack.config.js
const webpackConfig = {
/* .
*/ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { unsafe: true, inline: true, passes: 2, keep_fargs: false, }, output: { beautify: false, }, mangle: true, }, }), new OptimizeCSSPlugin({ cssProcessorOptions: { "preset": "advanced", "safe": true, "map": { "inline": false }, }, }), ], }, }; /* .
*/
В результате размер js-файлов уменьшился на 1,5%, а css — на 2%.
Может быть, ты можешь лучше? UPD 11.01.2019 : UglifyJsPlugin устарел, в настоящее время используется веб-пакет TerserWebpackПлагин .
Используй это.
4. Используйте нулевой загрузчик, чтобы удалить ненужные зависимости.
От разработчиков gsap Получилась отличная библиотека для создания анимации.
Но в связи с тем, что он датирован 2008 годом, некоторые особенности в нем остались.
А именно Вот этот .
Благодаря этому TweenMax поставляется с 5 плагинами и easyPack, использовать которые совершенно необязательно.
Я заметил у себя три дополнительных плагина и вырезал их с помощью нулевой загрузчик : // webpack.config.js
const ignoredGSAPFiles = ['BezierPlugin', 'DirectionalRotationPlugin', 'RoundPropsPlugin'];
const webpackConfig = {
/* .
*/ module: { rules: [ /* .
*/ { test: /\.
js$/, include: ignoredGSAPFiles.map(fileName => resolve('node_modules/gsap/' + fileName)), loader: 'null-loader', }, ] }, }; /* .
*/
И 106 кб превращаются в 86. Та-да!
Null-loader также можно использовать для удаления ненужных полифилов, которые нам заботливо предоставили авторы библиотеки.
Теги: #Разработка веб-сайтов #JavaScript #Оптимизация клиента #webpack #оптимизация сайта #gsap #webpack 4 #fast-async #null-loader
-
Тенденции Кибербезопасности От Bi.zone
19 Oct, 24 -
Google Maps Предлагает Похвалу И Ругань
19 Oct, 24 -
Набор Данных О Мобильных Приложениях
19 Oct, 24 -
Синхронизировать Представление С Коллекцией
19 Oct, 24 -
Рамблер Покажет Футбол
19 Oct, 24
