📌  相关文章
📜  INLINE RUNTIMECHUNK = false (1)

📅  最后修改于: 2023-12-03 15:15:50.309000             🧑  作者: Mango

关于 'INLINE RUNTIMECHUNK = false' 的介绍

简介

当打包代码时使用 webpack 进行构建时，我们可以通过配置将代码分割成多个 chunk 进行懒加载，以此来减小初始加载时间，提高页面加载速度。而 'INLINE RUNTIMECHUNK = false' 是一种常用的配置选项，它可以使运行时代码提取到单独的文件中，使得打包后的代码更加清晰，易于维护。

如何配置

在使用 webpack 进行构建时，我们可以在配置文件中设置 'INLINE RUNTIMECHUNK = false' 即可开启此功能。具体代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: {
    main: './src/index.js',
    vendor: [
      'react',
      'react-dom'
    ]
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

在上述代码中，我们通过设置 optimization.runtimeChunk.name 为 'manifest'，使得运行时代码被提取到一个名为 'manifest' 的文件中。同时，我们在 output.filename 的命名中使用了 [chunkhash]，以保障文件缓存的有效性。

页面实现

当代码分割开启并且 'INLINE RUNTIMECHUNK = false' 生效时，我们需要在 HTML 中引入单独提取的运行时文件。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./vendor.70456b9f2c3732d8ab8b.js"></script>
  <script src="./main.9508f49da6c2b52f716b.js"></script>
  <script src="./manifest.1a8217db235b6cd64915.js"></script>
</body>
</html>

在上述代码中，我们为页面引入了 'vendor'、'main'、'manifest' 三个文件，其中 'manifest' 文件就是包含运行时代码的文件。通过在 HTML 中引入这个文件，我们保证了 webpack 拆分的代码能正确运行。此时，我们也可以在开发者工具的 network 中看到运行时代码被提取到了单独的文件中。