webpack优化实践：使用IgnorePlugin优化moment第三方包

webpack5

1. IgnorePlugin是什么？有什么用？

• IgnorePlugin是webpack的一个内置插件，用于：忽略第三方包指定目录，让这些目录不要被打包进去。
• 比如：我们使用 moment.js，直接引用后，里边有大量的 i18n 的代码，导致最后打包出来的文件比较大，而实际场景并不需要这些 i18n 的代码，这时我们可以使用 IgnorePlugin 来忽略掉这些代码文件

2. 使用举例

2.1 优化前

• 安装moment

• 在入口文件中写如下代码

  import moment  from 'moment'
  moment.locale('zh-cn')    // 指定语言是中文
  ​
  const result = moment().format('MMMM Do YYYY, h:mm:ss a');
  console.log(result);
  

• 打包结果: 多了很多不必要的语言，但我们只需要使用中文

  

• 运行结果: 正常，可以在运行网页的控制台中看到输入

  

2.2 优化

• 修改webpack插件配置使用IgnorePlugin

  moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去

  new webpack.IgnorePlugin({
      resourceRegExp: /^./locale$/,
      contextRegExp: /moment$/,
  })
  

• 修改代码，显示引入zh-cn

  // 添加这行代码：手动引入所需要的中文语言包
  import 'moment/locale/zh-cn';
  ​
  import moment  from 'moment'
  moment.locale('zh-cn')
  ​
  const result = moment().format('MMMM Do YYYY, h:mm:ss a');
  console.log(result);
  

2.3 优化后的效果

• 打包结果：体积变小，不在有那些根本用不到的语言包了

  

• 运行结果：仍然可以在浏览器中看到如下输出