webpack---code Spliting

对你的应用进行代码分割能够帮助你“懒加载”当前用户所需要的内容，能够显著地提高你的应用性能。

尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

webpack现在通用代码分割的方法有三个：

1.entry

 通过配置entry实现手动分割代码。（多入口文件； SPA不建议用，一个html一个入口）

 优点： 最简单，最易懂

 缺点：

 1）手动配置，如果入口文件引用重复，代码也会被重复打包。

 2）不够灵活，不能动态拆分代码逻辑

2.避免重复（prevent duplication）

  使用splitChunksPlugin来去重和分割代码。

  webpack4.0以前使用CommonChunksPlugin+entry:{vendor: []},webpack4移除了该插件。

  最好不要给非入口文件设置entry.

 

+   optimization: {
+     splitChunks: {
+       chunks: 'all'
+     }
+   }

 

3.动态导入

  通过模块中的内联函数调用来分割代码。

  1)使用动态import()语法；（推荐）

  ⚠️：该方法可以通过React.lazy来实现。

  使用Suspense时，一定要细化，在最外层和内部嵌套的子层都加上Suspense。

如果没有下面的代码会报错: 有react组件未加Suspense

没有下面的代码，会报错： 不能在未挂载的组件查找节点。

动态 import() 语法目前只是一个 ECMAScript (JavaScript) 提案， 而不是正式的语法标准。预计在不远的将来就会被正式接受。

 

  2)require.ensure

 另： lazy loading(懒加载或者按需加载)继承自code-spliting

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄