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

Posted 2023-02-23

【中文标题】使用 webpack 在 Vue PWA 中包含大型 js 依赖项

【英文标题】：Including large js dependency in Vue PWA with webpack

【发布时间】：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 属性的文件？

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