Избегайте использования кода при импорте импорта - PullRequest
Новая
       32

Избегайте использования кода при импорте импорта

0 голосов
/ 09 января 2019

Я выполняю упражнение по уменьшению размера своего пакета веб-пакетов, и с помощью анализатора пакетов веб-пакетов я увидел, что действительно тяжелый пакет включается в два разных асинхронных блока, хотя он используется только один раз. Немного покопавшись в моем коде, я понял, что это возможно из-за следующего сценария:

file1.js 

import { foo } from 'ReallyHeavyPackage'

export function a(): string {
    console.log("called a()");
}

export function b(): string {
    return foo();
}

file2.js 

import { a } from './file1.js'

a();

file3.js 

import { b } from './file1.js'

b();

Я предполагаю, что поскольку file1 импортирует тяжелый пакет глобально, а file2 импортирует функцию из file1, он получает тяжелый пакет как зависимость, даже если он не импортирует функцию, которая фактически использует пакет. Я бы ожидал (или, скорее, хотел бы), чтобы только в блоке для file3 была включена тяжелая зависимость, поскольку это единственное место, где он используется.

Есть ли определенный способ, которым я должен обрабатывать импорт, как этот? Возможно, волшебную конфигурацию, которую я могу сделать в веб-пакете, чтобы помочь с этим, лучший способ структурирования модулей / функций или просто лучший способ импорта функций / модулей / пакетов?

Я использую Webpack 4, и я на ES2017

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Я думаю, что вам нужен Webpack CommonChunksPlugin: https://webpack.js.org/plugins/commons-chunk-plugin/. Этот плагин берет общие блоки (модули / библиотеки) из разных пакетов и помещает их в свои собственные пакеты.

0 голосов
/ 09 января 2019

Может попробовать динамический импорт? 

export function a(): string {
  console.log("called a()");
}

export async function b(): string {
  const { foo } = await import('ReallyHeavyPackage');
  return foo();
}

https://webpack.js.org/guides/code-splitting/#dynamic-imports

...