webpack---code Spliting

最新推荐文章于 2024-07-23 11:26:43 发布

weixin_34228617

最新推荐文章于 2024-07-23 11:26:43 发布

阅读量160

点赞数

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/lyraLee/p/10839358.html

版权

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

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

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

转载于:https://www.cnblogs.com/lyraLee/p/10839358.html

关注