使用 webpack 在 Vue PWA 中包含大量 js 依赖项

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 and the 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 依赖项

Including large js dependency in Vue PWA with webpack

webpack

babeljs

progressive-web-apps

vuejs2

vue-cli