webpack忽略服务端垫片,优化webpack bundle体积

2017-9-7 13:48:41

最近打算把wp换掉,所以新开了个项目https://github.com/bangbang93/freyja

Vue的SSR,但是在大体依赖完工之后,发现打包完成的bundle文件有2.3M……这个太可怕了,服务器带宽只有5M,意味着最好情况下也需要4秒多的时间才能够把bundle文件下载下来

http://alexkuz.github.io/webpack-chart/分析了一下,可以看到最大的是node_modules里的内容,具体进去看的话

很多都是markdown-it的插件依赖,但是还看到了一个iconv-lite,很好奇它是从哪来的,用npm ls看了一下

发现是vue-fetch的依赖,而vue-fetch为了支持服务端渲染,在非浏览器环境下会使用node-fetch作为垫片库,webpack连他也一起打包进来了,所以需要让webpack把他忽略掉,因为浏览器环境下不会用到这个垫片库

翻看webpack的文档,看到了https://webpack.js.org/configuration/resolve/#resolve-alias可以给module设置alias,但是这样在全局设置总觉得太难受,继续往下翻看到了https://webpack.js.org/configuration/resolve/#resolve-aliasfields,这里给了一个链接https://github.com/defunctzombie/package-browser-field-spec

这里说明了可以在package.json里添加一个browser字段,起到resolve.alias一样的作用,而且仅限当前package,于是给vue-fetch的package.json加了

"browser": {
    "node-fetch": false
  },

再重新看webpack bundle大小,已经下降到1.6M了,虽然还是有点大,下一步可能考虑不用vue-markdown,自己根据需求裁剪他的依赖了