Webpack中的Externals和Dll: 优化代码和提升性能

Webpack中externals与dll：节省代码体积和提升加载速度

Webpack是一个模块打包工具，用于将多个模块打包成一个或多个用于生产的代码块。为了优化代码体积和加载速度，Webpack提供了两种重要的功能：externals和dll。

Externals

Externals用于告诉Webpack不要将某些依赖项打包到应用程序代码中。这对于那些在应用程序外部共享的库或模块非常有用。通过排除这些外部依赖项，可以显着减小捆绑包的大小。

使用externals的步骤

1. 在Webpack配置中，创建externals对象。
2. 将要排除的依赖项名称作为键添加到该对象中。
3. 将想要链接到外部库的变量名作为值添加到该对象中。

// webpack.config.js
module.exports = {
  externals: {
    jquery: "jQuery"
  }
};

Dll

Dll（动态链接库）是一种预编译代码包，可以帮助提升加载速度。Dll包含经常使用的模块，这些模块在应用程序启动时预先加载。这消除了在运行时加载这些模块的需要，从而减少了应用程序的启动时间。

使用dll的步骤

1. 安装webpack-dll-plugin。
2. 在Webpack配置中，创建DllPlugin实例。
3. 将DllPlugin实例添加到webpack插件数组中。
4. 运行Webpack构建Dll。
5. 在应用程序的Webpack配置中，添加DllReferencePlugin实例。

// webpack.config.js (DllPlugin配置)
const webpack = require("webpack");
const DllPlugin = require("webpack-dll-plugin");

module.exports = {
  plugins: [
    new DllPlugin({
      name: "my-dll",
      path: "./dll/my-dll.json"
    })
  ]
};

// webpack.config.js (DllReferencePlugin配置)
const webpack = require("webpack");
const DllReferencePlugin = require("webpack-dll-plugin");

module.exports = {
  plugins: [
    new DllReferencePlugin({
      context: __dirname,
      manifest: require("./dll/my-dll.json")
    })
  ]
};

---