webpack优化代码运行之Code split

一、 什么是code split

Webpack的code split是一种技术，它能够将代码分割成多个块，从而优化应用程序的性能。这样做可以实现按需加载和并行加载，从而减少初始化时间和请求次数。Code split在Webpack中通过使用entry语法和各种Loader和插件来实现，可以将代码分割成多个文件，然后在需要时加载它们。它可以适用于任何类型和大小的应用程序，尤其适合大型单页应用和跨页面共享代码的应用程序。

二、code split 打包多入口文件

webpack的code split可以通过在webpack.config.js配置文件中设置entry和output来实现。entry指定入口文件，可以通过设置多个entry来实现code split。output则指定输出文件名和输出目录。

例如，我们可以在webpack.config.js中设置多个entry，如下所示：

entry: {
   
  app: './src/app.js',
  vendor: ['react', 'react-dom', 'lodash'],
  polyfills: './src/polyfills.js'
},

其中，app是我们应用程序的入口，vendor包含了我们使用的第三方库，polyfills包含了需要兼容旧浏览器的代码。

接着，在output中，我们可以使用占位符来设置文件名：

output: {
   
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[chunkhash].js'
}

其中，name指entry的键名，chunkhash表示根据文件内容生成的哈希字符串，可以保证文件名的唯一性。

最终，我们的应用程序会被分成多个小的JavaScript文件，例如：

• app.1a2b3c.js
• vendor.4d5e6f.js
• polyfills.7g8h9i.js

这样可以有效地缩短页面加载时间和提高应用程序的性能。

三、code split 提取公共代码

Webpack的Code Split技术可以帮助我们提取公共代码，减少页面的加载时间，提高页面的性能。下面我举一个例子来说明如何使用Webpack的Code Split技术提取公共代码。

假设我们有一个应用程序，其中包含两个页面：首页和用户页面。我们想要提取公共代码以减少页面的下载时间。为此，我们可以使用Webpack的多个入口特性，其中每个入口都是一个单独的JavaScript文件。

首先，在我们的Webpack配置文件中，定义两个入口文件，如下所示：

entry: {
   
  home: './src/home.js',
  user: './src/user.js'
}

然后，我们可以在每个入口文件中使用Webpack的动态导入技术来加载共享模块。这里，我们使用import()函数来导入一个包含公共代码的JavaScript文件：

// home.js
import