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