Webpack 文件分割


  • 捆绑拆分:创建更多、更小的文件(但每个请求都需要加载它们)以获得更好的缓存效果。
  • 代码拆分:动态加载代码,用户只下载他们正在查看的内容所需的代码。

设置 optimization.splitChunks.chunks ='all'意味着"将 node_modules 所有内容都放入名为 vendors~main.js 的文件中"。

output.chunkFilename 和 output.filename 区分开,以便同时使用 hash chunk 和 semver chunk。

使用 cacheGroups 拆分每个 npm 包

手动添加 entry

路由动态加载

polyfill 动态加载

虽然文件多有下面这些问题,但通过实验足以说明"更多文件会更好":
  • 大量的网络请求不是更慢吗?
  • 每个 Webpack 捆绑包中不是有样板代码?
  • 如果有多个小文件,不就失去了压缩的优势了吗?