如何解决webpack打包的文件体积过大的问题

#1

刚才打包正在做的项目，一个js文件有8M :joy:

#2

:laughing:哈哈哈。。。

#3

压缩已经开启了吗?

#4

即使压缩之后也减少不了多大体积~~最后估计还是有几M

#5

我用了 React 以后 React 就很大, 现在能定位是什么原因吗?

#6

一个页面依赖了那么多的js模块嘛？可以把公共的通过common plugin单独打成common.js

#7

我现在也正在分离模块~~

#8

github上面有webpack作者写的一个webpack打包分析的工具，可视化的看到webpack的状态，以及优化的一些建议，非常的不错。

#9

webpack 可以分析依赖关系，把文件划分为几个 chunk，然后按需加载的啊。

#10

HootSuite的前端做过有一个Webpack的分享，里面说了很多关于处理体积的技巧：https://www.youtube.com/watch?v=w1dAb_Umt8o

1 Like
#11

赞~

#12

打包后 8M, 这与任何打包软件及设置都关系不大吧，你用了多少 JS 代码库啊？？ 自己算下，真要用这么多吗？？

#13

请问楼主解决了这个问题了吗？我查找了一下资料发现，可以用require.ensure方法进行codespliting http://webpack.github.io/docs/code-splitting.html 不过我是用react-router来进行路由的，这个方法似乎并不能用，然后看到github上面有人在讨论 https://github.com/rackt/react-router/issues/755 请问有其他更好的方法吗？

#14

可以尝试分离出common的js，然后一些不是马上用的js，动态require

#15

可以试试，https://github.com/QianmiOpen/react-async-router

#16

给你个我最近使用的解决方法
http://www.walkerfree.com/article/7

#17

react-router example 中有一个例子（react-router + webpack + require.ensure）： https://github.com/rackt/react-router/tree/master/examples/auth-with-shared-root

#18

参考一小时学会webpack 中自定义公共模块提取部分，相关库可以打个包。另外就是打包设置。感觉不太可能会有8M的js哈。

#19

推荐文章： https://diamont1001.github.io/webpack-summary/

#20
  1. 产品化打包一定要uglify并压缩，这个是webpack的插件
  2. server开gzip

5M-》1.5M-》500KB