@ угловой / материал импортная стоимость ствола - PullRequest
0 голосов
/ 05 сентября 2018

Используя последние версии Angular & CLI (~ 6.1.6) и новейшую библиотеку @ angular / material (~ 6.4.7), я обнаружил довольно существенное снижение производительности при использовании импорта из @ angular / material's основная точка входа (public_api.ts):

import { MatButtonModule }  from '@angular/material';

Если я обновлю инструкцию импорта для использования вторичной конечной точки:

import { MatButtonModule }  from '@angular/material/button';

Мой пакет поставщика уменьшен на ~ 2,6 МБ, а скорость рендеринга страницы уменьшена на ~ 200 мс.

С возможностью сотрясения дерева @angular/cli, конечный размер сборки продукта эквивалентен любому из операторов импорта. В результате я чувствую, что люди часто предпочитают семантику разработки более краткого оператора импорта, не понимая / не понимая потери производительности dev-time.

Почему не обсуждается вопрос о снижении производительности за "импорт бочек" третьей стороной? Мне было очень трудно найти какую-либо документацию по процессу принятия решений и / или влиянию на производительность этих вариантов.

1 Ответ

0 голосов
/ 05 сентября 2018

Поэтому, когда вы импортируете баррель, веб-пакет добавит все экспорты из барреля в ваш bundle.js. Когда вы импортируете определенный файл, как показано ниже

import { MatButtonModule }  from '@angular/material/button';

Будет импортироваться только кнопка файл.

Но выпуск webpack 2 шел со встроенной поддержкой модулей ES2015 (псевдонимы модулей гармонии), а также обнаружением экспорта неиспользуемых модулей. В новом выпуске webpack 4 эта возможность расширена за счет способа предоставления подсказок компилятору через свойство package.json "sideEffects", чтобы указать, какие файлы в вашем проекте являются "чистыми" и, следовательно, безопасными для удаления, если они не используются.

Есть несколько советов, чтобы избавиться от «мертвого кода» (импорт, который входит в комплект, но не используется)

  • Использовать синтаксис модуля ES2015 (т.е. импорт и экспорт).
  • Добавьте свойство "sideEffects" в файл package.json вашего проекта.
  • Используйте параметр конфигурации режима production для включения различных оптимизаций, включая минимизацию и встряхивание дерева .
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...