Webpack打包优化指南

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:[