Включение большой зависимости JS в Vue PWA с веб-пакетом - PullRequest
Новая
       31

Включение большой зависимости JS в Vue PWA с веб-пакетом

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

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

const WordDictionary = {
  aa: true,
  aah: true,
  aahed: true,
  aahing: true,
  ...
}

Я использую словарь, чтобы проверить, является ли словодействительный.Этот файл заканчивается около 1,3 МБ.Когда я строю для производства или обслуживаю с сервера разработки, обработка занимает много времени.

Я думаю, что проблема с Бабелем, потому что я получаю это сообщение, когда процесс сборки наконец завершается.

[BABEL] Note: The code generator has deoptimised the styling of word-dictionary.js as it exceeds the max of 500KB.

Как настроить процесс сборки Vue CLI / webpack / babel, чтобы исключить этот большой файл?Есть ли лучший способ для включения такого большого словаря в PWA?(Определенно добавлю кеширование с сервисным работником, как только я это выясню)

1 Ответ

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

@ Комментарий Адама указал мне правильное направление.Я использовал опцию exclude для babel .Я отредактировал свой babel.config.js, чтобы он выглядел так: 

module.exports = {
  presets: [
    '@vue/app',
  ],
  exclude: ['word-dictionary.js'],
};

, но он работал только для сервера разработки.Чтобы заставить его работать для производственной сборки, я провел долгую ночь, читая документацию о конфигурации webpack и документацию о цепи webpack , и придумал решение.В vue.config.js я добавил следующее: 

chainWebpack: (config) => {
  config.module.rules.get('js').exclude.add(/[\\/]src[\\/]assets[\\/]word-dictionary[\\.]js/);
  config.optimization.merge({
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        dictionary: {
          minChunks: 1,
          name: 'dictionary',
          test: /[\\/]src[\\/]assets[\\/]word-dictionary[\\.]js/,
        },
      },
    },
  });
},

, которое исключает возможность обработки словаря babel, а также разбивает его на собственный фрагмент.Было полезно использовать команду vue-cli-service inspect (или запустить vue ui и запустить inspect task), чтобы увидеть конфигурацию веб-пакета, сгенерированную Vue CLI

Я фактически не использовал это решение, как я решилполучить словарь в виде открытого текста после загрузки компонента и использовать indexOf для поиска слов.

...