使用 webpack 在 Vue PWA 中包含大型 js 依赖项答案

【问题标题】：Including large js dependency in Vue PWA with webpack使用 webpack 在 Vue PWA 中包含大型 js 依赖项
【发布时间】：2019-02-26 11:00:59
【问题描述】：

我正在开发一个使用 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 中？（一旦我弄清楚那部分，肯定会使用服务工作者添加缓存）

【问题讨论】：

您是否尝试过忽略.babelrc 中具有ignore 属性的文件？

标签： webpack vuejs2 babeljs progressive-web-apps vue-cli

【解决方案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 来搜索单词。

【讨论】：