webpack4 配置详解之 optimization 选项-JavaScript中文网-JavaScript教程资源分享门户

webpack4 配置详解之 optimization 选项

随着前端开发的不断发展，Web 应用的复杂度越来越高，JavaScript 脚本的体积也不断增长。为了提高页面的性能和加载速度，前端工程师需要熟练掌握 webpack 工具的使用。其中，optimization 选项是 webpack4 中非常重要的配置项，本篇文章将对该选项进行详细介绍。

optimization 选项的作用

optimization 选项是 webpack4 中用于控制代码优化和代码分割的配置项。使用这个选项可以让你根据项目的特点自定义代码优化策略和代码分割方式，从而使生成的 bundle 更小、加载速度更快。

optimization 选项的常用配置

optimization 选项有多个配置项，常用的有以下几个。

minimizer

该选项用于配置 webpack 如何压缩 JavaScript 代码，默认使用 UglifyJSPlugin 进行代码压缩。在 webpack4 中还引入了一个新的压缩工具 – Terser，它支持 ES6 语法的压缩和 Tree Shaking，因此建议使用 TerserPlugin 进行代码压缩。

-- -------------------- ---- -------
----- ------------ - ---------------------------------

---

-------------- - -
 ------------- -
    ---------- -
      --- --------------
        ------ -----
        --------- -----
        ---------- ----
      --
    -
 -
-展开代码

splitChunks

该选项用于配置 webpack 如何分割代码。它可以将多个入口文件中共用的模块抽离成单独的 chunk，从而减少重复代码的加载，提高页面的加载速度。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
}

以上代码会将多个入口文件中共用的模块抽离成单独的 chunk，并将这些 chunk 缓存起来，以便下次使用时直接从缓存中读取。

runtimeChunk

该选项用于配置 webpack 如何处理 runtime 和 manifest 文件。默认情况下，webpack 会将 runtime 和 manifest 文件打包到每个 chunk 中，导致多个 chunk 中都包含了相同的 runtime 代码，产生了重复加载的问题。使用 runtimeChunk 选项可以将 runtime 和 manifest 文件提取到一个单独的文件中，并缓存起来，避免了重复加载的问题。

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    }
  }
}

以上代码会将 runtime 和 manifest 文件提取到一个单独的文件中，并将该文件命名为 manifest。

removeEmptyChunks

该选项用于删除空的 chunk，从而减少生成的 bundle 的体积。

module.exports = {
  optimization: {
    removeEmptyChunks: true
  }
}

以上代码会删除空的 chunk，使生成的 bundle 更小。

nodeEnv

optimization 选项还提供了 nodeEnv 配置项，用于告诉 webpack 当前的环境是否为生产环境。如果是生产环境，则 webpack 会自动启用一些代码压缩和去除无用代码的优化配置。

module.exports = {
  mode: 'production',
  optimization: {
    nodeEnv: 'production'
  }
}

以上代码会告诉 webpack 当前的环境为生产环境，并自动开启一些代码压缩和去除无用代码的优化配置。

优化代码的一些技巧

除了使用 webpack 的 optimization 选项进行优化之外，还有一些其他技巧可以帮助我们优化代码。

减少 HTTP 请求

在 Web 应用中，HTTP 请求是非常影响性能的因素之一。为了减少 HTTP 请求的数量，可以将多个 JavaScript 文件合并成一个文件，并将多个 CSS 文件合并成一个文件。同时，将图片等静态资源进行合并或者使用 CDN 加速也可以减少 HTTP 请求的数量。

使用异步加载

使用 webpack 动态加载模块的功能可以使 Web 应用更快地响应用户的操作，减少加载时间。可以使用 import() 语法动态加载第三方库或者应用中的一些代码块。

import('some-module').then((someModule) => {
  // 使用 someModule
}).catch((error) => {
  // 处理错误
});

以上代码会在需要的时候才去动态加载 some-module 模块。

使用 Tree Shaking

Tree Shaking 是一种只打包项目中实际用到的代码的技术，它可以帮助我们消除代码中没有被使用到的部分。

在 webpack4 中，Tree Shaking 功能已经集成到了 UglifyJSPlugin 和 TerserPlugin 中。只要将这些插件加入到 optimization.minimizer 中即可开启 Tree Shaking 功能。

-- -------------------- ---- -------
----- ------------ - ---------------------------------

---

-------------- - -
 ------------- -
    ---------- -
      --- --------------
        ------ -----
        --------- -----
        ---------- ----
      --
    -
 -
-展开代码

结束语

通过对 optimization 选项的介绍和优化代码的一些技巧的分析，相信读者已经对 webpack4 中代码优化有了更深入的了解。掌握这些技巧可以使我们的 Web 应用更加流畅，用户体验更佳。希望读者可以在实际项目中灵活运用这些技巧，实现最佳的性能优化效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c539e96e1fc40e36ea185c

webpack4 配置详解之 optimization 选项