Stay hungry. Stay foolish.border="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=489970551&auto=1&height=66">
前言
web前端打包工具对于高效开发来说已是必不可少,但高效开发并不能保证用户体验好,我们经常为了减少http请求而将所有代码打包到一个js文件中,但这明显不科学。因为随着项目的扩展,js文件会越来越大,这会导致许多问题。这就需要我们来优化组织打包文件,对于webpack来说这也是很有必要的。
工具介绍
今天意外地发现了一个神奇的工具,是一个将webpack打包后的文件关系可视化的工具,叫webpack-bundle-analyzer,这里是npm的工具链接,其效果如下。
优化第一步——第三方依赖分离
上图中很明显的看到只打包了一个js文件,app.js。它包含了第三方依赖代码和业务代码。每次http请求都会请求这个文件,而这个文件中常常有一些不变化的第三方依赖包。因为第三方依赖不想业务代码那样多变,所以我们就想能不能将业务代码和第三方依赖代码分离打包?然后第三方依赖缓存到客户端,这样就不必多次请求了。Bingo!我们只需要配置另一个入口文件,将第三方依赖配置上就OK了。
module.exports = {
……
entry:{
app:"./src/main.js",
vender:[