Angular9对lodash组件库按需引入的tree-shaking优化不生效?

如题,angular-cli默认集成了wepack配置
刚做了webpack.config.js自定义配置。除了splitchunk和lodash以外没有其他配置
我理解优化lodash组件库有两种方式
1.lodash换成lodash-es组件库,在webpack config中将mode设置为production开启,满足条件自动tree-shaking

tree-shaking使用的条件:
1.使用ES Modules语法(即ES6的import和export关键字)
引用
2.不使用CommonJS语法(即require和exports语法)
引用
3.引入的时候只引用自己需要的模块,如:
引用
import {xxx} from 'lodash-es' //只引入xxx其他方法就可以被tree-shaking
import _ from 'lodash-es' //无法tree-shaking无用模块

2.官方给出的2个方案:
babel-plugin-lodash
lodash-webpack-plugin
我的webpack plugin配置

  module: {
    rules: [
      {
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
        options: {
          plugins: ['lodash']
        }
      }
    ]
  },
 new LodashModuleReplacementPlugin()

我理解这两个方案应该是独立的。

image.png
优化配置后的结果是 使用第一种方案引入更换为lodash-es成功按需引入 webpack bundle analyzer 看到体积只有73KB。
image.png
然而第一个疑问❓
但是不知道为什么还会有lodash这个包,packjson中没删,但是项目中已经没有引入lodash了。
image.png
第二个疑问❓
试着加上第二种方案后,生产生成的包看不到任何lodash了。。 vendors也从14.57MB减少到了 13.6MB
image.png
第三个疑问❓
只用第二种方案的话,lodash体积没有任何变化,包下也没有显示具体componentjs以及很多小的模块
image.png

阅读 1.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题