这篇文章主要讲解了“webpack打包文件太大怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“webpack打包文件太大怎么解决”吧！
webpack
把我们所有的文件都打包成一个
JS
文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。
去除不必要的插件
刚开始用
webpack
的时候，开发环境和生产环境用的是同一个
webpack
配置文件，导致生产环境打包的
JS
文件包含了一大堆没必要的插件，比如
<font size="3" color="#000000">HotModuleReplacementPlugin, NoErrorsPlugin</font>
复制代码
这时候不管用什么优化方式，都没多大效果。所以，如果你打包后的文件非常大的话，先检查下是不是包含了这些插件。
提取第三方库
像
react
这个库的核心代码就有
627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在
webpack
中设置
<font size="3" color="#000000">{
entry: {
bundle: 'app'
vendor: ['react']
}
plugins: {
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
}
}</font>
这样打包之后就会多出一个
vendor.js
文件，之后在引入我们自己的代码之前，都要先引入这个文件。比如在
index.html
中
<font size="3" color="#000000"><script src="/build/vendor.js"></script></font>
除了这种方式之外，还可以通过引用外部文件的方式引入第三方库，比如像下面的配置
<font size="3" color="#000000">{
externals: {
'react': 'React'
}
}</font>
externals
对象的
key
是给
require
时用的，比如
require('react')，对象的
value
表示的是如何在
global
中访问到该对象，这里是
window.React。这时候
index.html
就变成下面这样
<font size="3" color="#000000"><script src="//cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="/build/bundle.js"></script></font>
当然，个人更推荐第一种方式。
目前推荐用
DLL
的方式提取第三方库。
代码压缩
webpack
自带了一个压缩插件
UglifyJsPlugin，只需要在配置文件中引入即可。
<font size="3" color="#000000">{
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}</font>
加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
另外，服务器端还可以开启
gzip
压缩，优化的效果更明显。
代码分割
什么是代码分割呢？我们知道，一般加载一个网页都会把全部的
js
代码都加载下来。但是对于
web app
来说，我们更想要的是只加载当前
UI
的代码，没有点击的部分不加载。
看起来好像挺麻烦，但是通过
webpack
的
code split
以及配合
react router
就可以方便实现。具体的例子可以看下
react router
的官方示例
huge apps。不过这里还是讲下之前配置踩过的坑。
code split
是不支持
ES6
的模块系统的，所以在导入和导出的时候千万要注意，特别是导出。如果你导出组件的时候用
ES6
的方式，这时候不管导入是用
CommomJs
还是
AMD，都会失败，而且还不会报错！
当然会踩到这个坑也是因为我刚刚才用
NodeJS，而且一入门就是用
ES6
的风格。除了这个之外，还有一点也要注意，在生产环境的
webpack
配置文件中，要加上
publicPath
<font size="3" color="#000000">output: {
path: xxx,
publicPath: yyy,
filename: 'bundle.js'
}</font>
不然的话，webpack
在加载
chunk
的时候，路径会出错。
设置缓存
对于静态文件，第一次获取之后，文件内容没改变的话，浏览器直接读取缓存文件即可。那如果缓存设置过长，文件要更新怎么办呢？嗯，以文件内容的
MD5
作为文件名就是一个不错的解决方案。来看下用
webpack
应该怎样实现
<font size="3" color="#000000">output: {
path: xxx,
publicPath: yyy,
filename: '[name]-[chunkhash:6].js'
}</font>
打包后的文件名加入了
hash
值
<font size="3" color="#000000">const bundler = webpack(config)
bundler.run((err, stats) => {
let assets = stats.toJson().assets
let name
for (let i = 0; i < assets.length; i++) {
if (assets[i].name.startsWith('main')) {
name = assets[i].name
break
}
}
fs.stat(config.buildTemplatePath, (err, stats) => {
if (err) {
fs.mkdirSync(config.buildTemplatePath)
}
writeTemplate(name)
})
})</font>
手动调用
webpack
的
API，获取打包后的文件名，通过
writeTemplate
更新
html
代码。完整代码猛戳
gitst。
这样子，我们就可以把文件的缓存设置得很长，而不用担心更新问题。
感谢各位的阅读，以上就是“webpack打包文件太大怎么解决”的内容了，经过本文的学习后，相信大家对webpack打包文件太大怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是天达云，小编将为大家推送更多相关知识点的文章，欢迎关注！