webpack4 打包项目 app.js文件过大

Question

打包完之后感觉APP.js是把除了第三方依赖包以外的文件又重新打了个大的包!
配置如下：

image.png

Answer 1

建议装一个 webpack-bundle-analyzer 看一下打包后的 app.js 的组成成分。

Answer 2

1.在webpack里配置splitChunks，把重复引用的包抽出
2.在webpack里配置externals，把不经常变动的包排除，放在cdn上
3.在babelrc中配置按需加载，或者引入组件时不要引入整个包
4.打包时开启gzip，这个需要服务器支持