Webpack 中文文档 目录

webpack 代码拆分(Code Splitting)

Webpack 代码拆分是一种优化技术,可以将大型的 JavaScript 应用程序分割成小块,这样可以减少初始加载时间,提高应用程序的性能。通过代码拆分,可以将代码按照功能或者路由进行分割,只在需要的时候加载对应的代码块。

使用动态 import 实现代码拆分

Webpack 4 推荐使用动态 import 来实现代码拆分。动态 import 是 ES6 中的语法,可以在运行时动态加载模块。

-- -------------------- ---- -------
-- ------
----- ------ - ---------------------------------
---------------- - ------ ----
-------------- - -- -- -
  ----------------------------- -- -
    ----- ----- - ---------------
    --------
  ---
--
----------------------------------

上面的代码中,当用户点击按钮时,会动态加载 print 模块并执行其中的代码。

使用 webpackChunkName 来命名代码块

当使用动态 import 进行代码拆分时,可以通过 webpackChunkName 来为生成的代码块命名,方便调试和分析。

-- -------------------- ---- -------
-- ------
----- ------ - ---------------------------------
---------------- - ------ ----
-------------- - -- -- -
  --------- ----------------- ------- -- ---------------------- -- -
    ----- ----- - ---------------
    --------
  ---
--
----------------------------------

使用 SplitChunksPlugin 进行公共模块提取

除了动态 import,Webpack 还提供了 SplitChunksPlugin 插件来进行公共模块提取,可以将公共模块抽离出来,避免重复加载。

通过以上配置,Webpack 会自动将公共模块抽离出来,生成单独的代码块。

以上就是关于 Webpack 代码拆分的介绍,通过代码拆分可以有效地优化应用程序的性能,提高用户体验。


上一篇:webpack 生产环境构建
下一篇:webpack 懒加载(Lazy Loading)
纠错
反馈