webpack进阶（三）：深入探索Sourcemap、公共资源提取与Tree Shaking

2023-11-21 12:11:36





## 前言

在webpack进阶系列的前两篇文章中，我们已经学习了webpack的基础知识和模块打包的原理。在本文中，我们将进一步深入探索webpack中更高级的特性，包括sourcemap的分析与使用、页面公共资源的提取以及Tree Shaking的原理与使用。

## Sourcemap的分析与使用

Sourcemap是一种用于追踪代码生成过程中原始源代码位置的工具。它可以帮助我们在浏览器中调试代码时，将错误信息与原始源代码的位置关联起来，从而更容易找到问题的根源。

webpack可以通过使用`--devtool`选项来生成sourcemap。常见的devtool选项包括：

* `"source-map"`：生成一个独立的sourcemap文件，该文件包含了所有源代码的位置信息。
* `"eval"`：将sourcemap嵌入到生成的JavaScript代码中。这可以减小文件大小，但会降低调试速度。
* `"inline-source-map"`：将sourcemap直接嵌入到HTML页面中。这可以使调试更加方便，但也会增加HTML文件的大小。

我们可以通过使用浏览器开发工具中的“Source Maps”面板来查看sourcemap。该面板允许我们在源代码和生成的代码之间进行切换，并查看错误信息的位置。

## 页面公共资源的提取

页面公共资源是指在多个页面中都用到的资源，例如样式表、脚本库等。提取公共资源可以减少HTTP请求的数量，从而提高页面的加载速度。

webpack可以通过使用`CommonsChunkPlugin`插件来提取公共资源。该插件允许我们指定需要提取的公共资源，并将其打包成一个单独的文件。

例如，我们可以使用以下配置来提取公共资源：

```javascript
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: ['jquery', 'bootstrap']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: 2
    })
  ]
};

上面的配置将提取jquery和bootstrap这两个库为公共资源，并将其打包成一个名为vendor.js的文件。

Tree Shaking的原理与使用

Tree Shaking是一种优化技术，它可以从代码中移除未使用的代码。这可以减小代码包的大小，从而提高页面的加载速度。

webpack可以通过使用webpack.optimize.UglifyJsPlugin插件来启用Tree Shaking。该插件使用UglifyJS来压缩代码，并移除未使用的代码。

例如，我们可以使用以下配置来启用Tree Shaking：

const webpack = require('webpack');

module.exports = {
  entry: './src/app.js',
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        drop_console: true
      }
    })
  ]
};

上面的配置将启用Tree Shaking，并移除未使用的代码。