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

Question

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

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的评论为我指明了正确的方向。我使用了 babel 的排除选项。我编辑了我的babel.config.js，看起来像这样：

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

但它仅适用于开发服务器。为了让它适用于生产版本，我花了一整夜阅读了 webpack config 的文档和 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搜索单词。