оптимизировать конфигурацию свертки, чтобы включить встряхивание дерева - PullRequest
Новая
       64

оптимизировать конфигурацию свертки, чтобы включить встряхивание дерева

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

Мне бы хотелось получить советы о том, как создать удобную в использовании оптимизированную сборку с потрясающим деревом.Я использую накопительный пакет для упаковки библиотеки пользовательского интерфейса, состоящей из нескольких компонентов.

Моя архитектура: 

/src
  /index.js
  /components
    /index.js
    /component1
      /index.js
      /Comp.vue
    ...
    /componentN
      /index.js
      /Comp.vue
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

src/components/index.js выглядит как 

export { default as Comp1 } from './component1
...
export { default as CompN } from './componentN

src/directives/index.js выглядит как 

export { default as Directive1 } from './directive1
...
export { default as DirectiveN } from './directiveN

Каждый внутренний index.js является просто привязкой для удобства, например 

import Comp from './Comp.vue'
export default Comp`

Наконец, src/index.js соберет все с: 

import { * as components } from './components'
import { * as directives } from './directives'

export { components, directives }

При сборке конфигурация свертки выглядит следующим образом: 

{
  input: 'src/index.js',
  output: {
    file: 'dist/lib.esm.js',
    format: 'esm',
}

(конечно, я избегаю всех прозрачных плагинов-уродов, я думаю, что они будут шуметь в этой проблеме)

Так что эта сборка выглядит хорошо и работает, но ...

  1. Очень неудобно использовать: 
import { components } from 'lib'
const { Comp1 } = components
Эта конструкция, вероятно, также нарушает дрожание дерева при использовании, потому что мы импортируем полный объект components, когда требуется только Comp1.

Я понимаю, что мне не следует заботитьсяо встряхивании деревьев, а скорее о предоставлении библиотеки, способной к встряхиванию деревьев , и это то, о чем идет речь.При тестировании моей сборки с самым простым шаблоном @ vue / cli была импортирована полная библиотека, даже @ vue / cli заявляет о включенной в комплекте функции webpack-treeshaking.

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

Я не знаю, как приступить к оптимизации.Любой указатель приветствуется.

1 Ответ

0 голосов
/ 19 марта 2019

На данный момент единственное правильное решение, которое я смог найти, - это построить отдельно все файлы в одной древовидной структуре внутри папки dist/.Я решил собрать файлы, чтобы обеспечить блоки стиля файлового формата Vue без дальнейшей необходимости сборки или настройки от конечного потребителя.

После сборки это выглядит так: 

/src
  /index.js
  /components
    /index.js
    /component1
      /index.js
      /Comp.vue
    ...
    /componentN
      /index.js
      /Comp.vue
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

/dist
  /index.js
  /components
    /index.js
    /component1
      /index.js
    ...
    /componentN
      /index.js
  /directives
    /index.js
    /directive1
      /index.js
    ...
    /directiveN
      /index.js

Я создал небольшой рекурсивфункция, чтобы найти все «index.js» и использовал этот список с функцией множественной точки входа свертки.мы надеемся, что в результате накопительного пакета будут созданы все подпапки, поэтому нет необходимости в проверках или mkdir -p. 

// shorthand utility for 'find all files recursive matching regexp (polyfill for webpack's require.context)'
const walk = (directory, regexp) => {
  let files = readdirSync(directory)

  if (directory.includes('/examples'))
    return []

  return files.reduce((arr, file) => {
    let path = `${directory}/${file}`
    let info = statSync(path)

    if (info.isDirectory())
      return arr.concat(walk(path, regexp))
    else if (regexp.test(file))
      return arr.concat([path])
    else
      return arr
  }, [])
}

// ...

const esm = walk(`${__dirname}/src`, /^index\.js$/)
  .map(file => ({
    input: file,

    output: {
      format: 'esm',
      file: file.replace(`${__dirname}/src`, CONFIG.module)
    },
    ...
  }))

Последняя часть процесса заключается в копировании / вставке package.json в dist/, cd в негои npm publish из него ... Это было интегрировано в наши задачи CI, так как оно не имеет прямого отношения к свертке или сборке, а скорее к публикации.

Это не идеально, но это единственный способ, который я нашел из-занедостаток ресурсов.Надеюсь, это кому-нибудь поможет.

...