webpack重复打包同名依赖包

最近安装了webpack-bundle-analyzer插件来分析打包构成,发现有一些包被重复的打包了多次,这样会让构建出来的包格外的臃肿。这主要是因为我们往往引用了很多的第三方包,而很多工具类的库也会被别的包间接的依赖,所以就导致了重复打包的现象,例如下图的immutable.js。

webpack重复打包同名依赖包_第1张图片

其实想解决也很简单,在webpack的resolve下面添加如下配置:

    alias: {
      'immutable': path.resolve(process.cwd(), 'node_modules', 'immutable'),
    },

resolve.alias的作用其实就是添加包的别名并强行指定引用统一路径,配置完的效果如下,只能看到一个immutable.js了。webpack重复打包同名依赖包_第2张图片

你可能感兴趣的:(前端工程构建)