Question

我正在使用Vue CLI构建一个简单的类似文字游戏的游戏。我找到了用于创建字典对象的单词列表，因为我读到查找对象中的键比数组中的值更快。

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

我用字典检查一个单词是否有效。该文件最终约为1.3mb。当我为生产进行构建或从开发服务器提供服务时，处理时间很长。

我认为问题出在Babel，因为在构建过程最终完成时，我会收到此消息。

[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中？（一旦我找出一部分，肯定会在服务人员中添加缓存）

Answer 1

@Adam的评论为我指明了正确的方向。我使用了exclude option for babel。我编辑了babel.config.js，使其看起来像这样：

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

，但仅适用于开发服务器。为了使它能够用于生产版本，我花了很长时间阅读documentation on webpack config和documentation on webpack-chain并提出了解决方案。在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生成的webpack配置很有帮助。

实际上，我最终没有使用此解决方案，因为我决定在组件加载后以纯文本形式获取字典，并使用indexOf搜索单词。

使用Webpack在Vue PWA中包含大型js依赖项

1 个答案: