webpack 优化（三）—— 预编译资源模块-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，Web 开发中的前端打包工具也越来越重要。而 webpack 作为目前最主流的前端打包工具之一，自然也成为了前端开发和优化中的重要工具。而 webpack 优化则更是让前端开发变得更为高效和便捷。

本文将会针对 webpack 优化的第三部分—— 预编译资源模块进行详细的介绍，以及对其深度分析和实际应用的指导。

什么是预编译资源模块？

在我们打包项目时，常常用到的一些第三方库或者框架，是不会在代码中被修改或者动态加载的。因此，如果我们能够提前将这些资源编译打包，就可以减少打包时间和增加性能。

而预编译资源模块实际上就是在 webpack 打包过程中，将这些第三方库或者框架打包成一个单独的文件，在浏览器中加载时再去使用该文件。这个过程会将每个模块的请求合并成一个文件，并输出对应的文件和源映射文件。

如何进行预编译资源模块的配置？

我们首先需要配置 webpack.config.js 文件，以便进行正确的预编译资源模块的配置。这个配置文件中需要有以下两个参数：

entry：预编译资源模块的入口文件，该入口文件中需要指定这些资源模块的名称和路径。
output：预编译资源模块的输出配置，我们需要指定输出文件名称和输出路径。

下面是一个示例的 webpack.config.js 文件：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'vendor.[hash].js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      context: __dirname,
      name: '[name]_[hash]',
      path: path.resolve(__dirname, 'public', '[name].json')
    })
  ]
};

这个示例 webpack.config.js 文件中需要注意的是，我们在 entry 中指定了两个需要预编译的资源模块 react 和 react-dom，而在 output 中则指定了输出文件的名称和路径。

同时，我们需要使用插件的方式进行预编译资源模块的编译，即在 plugins 中配置 DllPlugin 插件。DllPlugin 插件是专门用于预编译资源模块的插件，并且会生成一个 JSON 文件，该文件用于告诉 webpack 哪些模块被视为预编译的资源模块。

如何使用预编译资源模块？

在进行了以上的配置后，我们可以使用预编译资源模块来优化我们的项目性能。在使用预编译资源模块时，我们有两种方式：

1. 自行手动使用预编译资源模块

如果已经预编译了资源模块，我们需要手动引入这些资源模块。在 HTML 文件中直接引入生成的 vendor.[hash].js 文件即可。

// javascriptcn.com 代码示例
<!doctype html>
<html>
  <head>
    <title>预编译资源模块</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/public/vendor.b33501e5b1d2ddb3c3eb.js"></script>
    <script src="/public/main.f629dcef423243eb2a13.js"></script>
  </body>
</html>

2. 使用插件进行自动引入预编译资源模块

使用 webpack 自带的插件，可以自动帮我们生成 HTML 文件并引入预编译资源模块。我们需要在 webpack.config.js 文件中配置两个插件：

HtmlWebpackPlugin：这个插件能够自动生成 index.html 文件，并且会自动引入所有打包的资源。同时，我们需要使用 hash 引入文件版本，避免文件缓存问题。
AddAssetHtmlPlugin：这个插件可以将构建出的资源和页面自动注入到 html 模板中。只需要在入口页面中，配置好位置和需要注入的资源文件名即可。

下面是一个示例的 webpack.config.js 文件：

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: path.resolve(__dirname, 'public', 'vendor.json')
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, 'public', '*.dll.js'),
      outputPath: 'public',
      publicPath: 'public'
    })
  ]
};

这个示例 webpack.config.js 文件中使用了 webpack 的两个插件：DllReferencePlugin 和 HtmlWebpackPlugin。其中，DllReferencePlugin 用于引用预编译资源模块，而 HtmlWebpackPlugin 则用于自动生成 index.html 文件并自动引入所有打包的资源。

AddAssetHtmlPlugin 插件则是用于将构建出的资源和页面自动注入到 html 模板中，只需要在入口页面中，配置好位置和需要注入的资源文件名即可。

总结

预编译资源模块是优化 webpack 性能的一种有效的方法。通过将预编译的资源模块打包成一个单独的文件，在浏览器加载时再去使用该文件，可以减少打包时间，提高性能。

本文主要介绍了预编译资源模块的概念、配置和使用方式，以及与插件的结合使用方式。希望您能根据本文的指导，正确地使用预编译资源模块，提高项目性能和开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540c7457d4982a6eba56339