前端优化：Webpack 4 动态切割JS注入文件名大揭秘

优化JS加载：Webpack 4 动态切割JS注入文件名

作为一名前端开发者，您是否正在寻找优化JS加载性能的方法？动态切割JS注入是实现此目标的强大工具，而Webpack 4则提供了动态切割功能。在本教程中，我们将深入探究Webpack 4中的动态切割技术，并学习如何使用[request]变量来获取实际解析的文件名，从而生成独一无二的文件名。

动态切割：概述

动态切割是一种代码分割技术，它允许您将应用程序分解成更小的块，仅在需要时加载这些块。这有助于减少初始加载时间，提高应用程序的性能和用户体验。Webpack 4提供了开箱即用的动态切割功能，使您可以轻松地将应用程序拆分成更小的块。

配置动态切割

要配置动态切割，您需要在Webpack配置中使用optimization.splitChunks选项。该选项允许您指定哪些块应该被切割以及如何切割。例如，以下配置将把您的应用程序拆分成按需加载的块：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

使用[request]变量获取文件名

在动态切割块时，您可能需要使用[request]变量来获取实际解析的文件名。这对于生成独一无二的文件名非常有用。[request]变量包含了被切割的块的资源请求路径。例如，以下配置将使用[request]变量来生成动态切割块的文件名：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "async",
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      cacheGroups: {
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          filename: "[request].js",
        },
      },
    },
  },
};

使用此配置，动态切割块的文件名将是实际解析的文件名加上.js扩展名。例如，如果被切割的块包含app.js文件，则动态切割块的文件名将是app.js。

提高性能：启用长期缓存

为了进一步提高性能，您可以通过启用长期缓存来缓存动态切割块。这将允许浏览器在后续请求中重用缓存的块，从而减少加载时间。要启用长期缓存，您需要在Webpack配置中使用optimization.runtimeChunk选项。例如，以下配置将启用长期缓存：

module.exports = {
  optimization: {
    runtimeChunk: {
      name: "runtime",
    },
  },
};

启用长期缓存后，浏览器将缓存动态切割块，并在后续请求中重用这些缓存的块。这将大大减少加载时间，并提高应用程序的性能。

结论

通过使用Webpack 4的动态切割功能，您可以将应用程序分解成更小的块，仅在需要时加载这些块。这有助于减少初始加载时间，提高应用程序的性能和用户体验。此外，通过使用[request]变量，您可以生成独一无二的文件名，并通过启用长期缓存来提高性能。利用这些技巧，您可以优化JS加载，并为您的用户提供更好的体验。