webpack 创建 100 的 js 块削弱了使用 vue cli 的单个页面视图的性能

Question

我们有一个 vuejs 2 项目。

我们需要dayjs的一些功能。

我们将 dayjs 抽象为一个实用程序文件，following the guide 最终结果如下：

import { i18n } from '@/plugins/i18n';
import dayjs from 'dayjs';
import calendar from 'dayjs/plugin/calendar';

dayjs.extend(calendar);

export default async (date: Date, locale?: string): Promise<string> => {
  import(`dayjs\locales${locale}`)
  const time:any = i18n.t('datetime.dict');
  return dayjs(date).locale(userLocale).calendar(null, {
      lastDay: `[${time.yesterday} ${time.at}] LT`,
      sameDay: `[${time.today} ${time.at}] LT`,
      nextDay: `[${time.tomorrow} ${time.at}] LT`,
      lastWeek: `[${time.last}] dddd [${time.at}] LT`,
      nextWeek: `dddd [${time.at}] LT`,
      sameElse: 'LLLL'
  });
};

该应用程序运行良好，但 vuejs 将 dayjs 中的每个语言文件作为一个块输出，并将预取脚本标记添加到 index.html。

有没有其他人遇到过这个问题，上面的代码片段是错误的还是应该有更精确的导入？

这里是部分 dayjs 块的屏幕截图。每个块在不同的语言字符串下完全相同......但我们甚至还没有导入语言环境设置选项。

Answer 1

@MichalLevý 给出了这个问题的答案方向。

本质上，当你说：

时，webpack 无法知道要导入哪个文件

 import(`dayjs\locales${locale}`)

所以..它只是为它找到的每个文件创建一个 js 块。这本身并不算太糟糕。

当您将此行为与 vue-cli 的默认预取行为结合使用时，事情就会变得糟糕...结果是 webpack 创建的每个块最终都是“pre-fetched" 输出索引 HTML 文件中 HTML 头部的行。

因此，当动态导入有 400 个块时（在本例中是来自 dayjs 的语言环境），那么会对所有块进行预取。

这取决于您的设置，但是..对于我们来说，该应用程序也是一个 PWA，因此实际上不需要预取，因为 PWA 也会下载...实际上它会使下载量翻倍。

我们的答案是在预取上更具体： https://cli.vuejs.org/guide/html-and-static-assets.html#prefetch

而且，由于我们只需要几种语言，因此只导入需要的内容，但要具体，不要传递变量以映射到路径

webpack 创建 100 的 js 块削弱了使用 vue cli 的单个页面视图的性能

webpack creating 100's of js chunks crippling performance for a single page view with vue cli

webpack

vue.js

vue-cli