Vendors.js在构建时文件大小较大

Question

我使用npx nuxt-create-app启动了一个Nuxt.js项目，并在提示时添加了以下内容：

• Vuetify.js
• Axios
• PWA

命令完成后，我运行npm run generate并得到以下输出：

Version: webpack 4.42.0
Time: 50481ms
Built at: 03/22/2020 3:50:44 AM
Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json     14 KiB          [emitted]
347edfc8c71f21607d82.js   19.3 KiB       2  [emitted] [immutable]         pages_index
36edf39aed940985958a.js    169 KiB       1  [emitted] [immutable]         commons.app
8a4f26db9171c6d3e52c.js    4.3 KiB       6  [emitted] [immutable]
955eec4fff786128890e.js   2.35 KiB       4  [emitted] [immutable]         runtime
LICENSES  389 bytes          [emitted]
a8167919c00ee96e3ace.js  817 bytes       3  [emitted] [immutable]         pages_inspire
b80f759242c3c8480088.js    405 KiB       5  [emitted] [immutable]  [big]  vendors.app
b8dd601015ecae11904a.js     49 KiB       0  [emitted] [immutable]         app
icons/icon_120.5f6a36.png   4.68 KiB          [emitted]
icons/icon_144.5f6a36.png    5.8 KiB          [emitted]
icons/icon_152.5f6a36.png    6.1 KiB          [emitted]
icons/icon_192.5f6a36.png   7.83 KiB          [emitted]
icons/icon_384.5f6a36.png   18.1 KiB          [emitted]
icons/icon_512.5f6a36.png     20 KiB          [emitted]
icons/icon_64.5f6a36.png   2.35 KiB          [emitted]
manifest.47b2f596.json  810 bytes          [emitted]
+ 2 hidden assets
Entrypoint app = 955eec4fff786128890e.js 36edf39aed940985958a.js b80f759242c3c8480088.js b8dd601015ecae11904a.js
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
b80f759242c3c8480088.js (405 KiB)

我更改了nuxt.conf.js以拆分文件：

build: {
/*
** You can extend webpack config here
*/
analyze: true,
extend (config, {isClient}) {
if (isClient){
config.optimization.splitChunks.maxSize = 200000;
}
}
}

但我想知道的是

1. 即使文件较小，客户端是否仍必须下载总文件大小？那么如何代码拆分有帮助吗
2. 除了代码拆分之外，我还能做些什么来减少总体大小，因为这只是我的项目已经这么大了

Answer 1

实现这两个策略将大大减少加载时间。

建议：

1. 使用gzip/brotli压缩来最小化和压缩bundle。这将大大减少捆绑包的大小。(结账(

2. 基于路由/基于组件的代码拆分(我在React项目中使用过(

答案：

1. 是的。但是，如果压缩它并拆分它的代码，则只有在需要时才提取它
2. 阅读建议1