webpack 中的性能优化

[suukii]

减小打包体积

1. 按需加载：如果我们将代码全部打包进一个 JS 文件中，虽然减少了请求数，但同时也加载了很多暂时不需要的代码，耗费了更长时间，而且，在 HTTP/2 中，这种做法已经算不上有优势了。为了能更快地呈现页面，每个页面需要加载地文件体积当然要越小越好，这时候我们就可以使用按需加载，将每个路由页面单独打包。

2. Tree Shaking：删除项目中未被使用的代码，在 webpack4 中生产环境会启动开启这个优化功能。

3. Scope Hoisting：会分析模块之间的依赖关系，然后在打包过程中尽可能把多个模块合并到一个函数中，减少代码量。在 webpack4 中可以通过 optimization.concatenateModules 开启这个功能。