webpack 代码拆分(Code Splitting)

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

使用动态 import 实现代码拆分

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

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

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

使用 webpackChunkName 来命名代码块

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

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

使用 SplitChunksPlugin 进行公共模块提取

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

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

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

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