彻底解决 webpack 打包文件体积过大问题
webpack把我们所有的文件都打包成一个JS文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。
去除不必要的插件
刚开始用webpack的时候,开发环境和生产环境用的是同一个webpack配置文件,导致生产环境打包的JS文件包含了一大堆没必要的插件,比如HotModuleReplacementPlugin,NoErrorsPlugin...这时候不管用什么优化方式,都没多大效果。所以,如果你打包后的文件非常大的话,先检查下是不是包含了这些插件。
提取第三方库
像react这个库的核心代码就有627KB,这样和我们的源代码放在一起打包,体积肯定会很大。所以可以在webpack中设置
{ entry:{ bundle:'app' vendor:['react'] } plugins:{ newwebpack.optimize.CommonsChunkPlugin('vendor','vendor.js') } }
这样打包之后就会多出一个vendor.js文件,之后在引入我们自己的代码之前,都要先引入这个文件。比如在index.html中
除了这种方式之外,还可以通过引用外部文件的方式引入第三方库,比如像下面的配置
{ externals:{ 'react':'React' } }
externals对象的key是给require时用的,比如require('react'),对象的value表示的是如何在global中访问到该对象,这里是window.React。这时候index.html就变成下面这样
当然,个人更推荐第一种方式。
目前推荐用DLL的方式提取第三方库。
代码压缩
webpack自带了一个压缩插件UglifyJsPlugin,只需要在配置文件中引入即可。
{ plugins:[ newwebpack.optimize.UglifyJsPlugin({ compress:{ warnings:false } }) ] }
加入了这个插件之后,编译的速度会明显变慢,所以一般只在生产环境启用。
另外,服务器端还可以开启gzip压缩,优化的效果更明显。
代码分割
什么是代码分割呢?我们知道,一般加载一个网页都会把全部的js代码都加载下来。但是对于webapp来说,我们更想要的是只加载当前UI的代码,没有点击的部分不加载。
看起来好像挺麻烦,但是通过webpack的codesplit以及配合reactrouter就可以方便实现。具体的例子可以看下reactrouter的官方示例hugeapps。不过这里还是讲下之前配置踩过的坑。
codesplit是不支持ES6的模块系统的,所以在导入和导出的时候千万要注意,特别是导出。如果你导出组件的时候用ES6的方式,这时候不管导入是用CommomJs还是AMD,都会失败,而且还不会报错!
当然会踩到这个坑也是因为我刚刚才用NodeJS,而且一入门就是用ES6的风格。除了这个之外,还有一点也要注意,在生产环境的webpack配置文件中,要加上publicPath
output:{ path:xxx, publicPath:yyy, filename:'bundle.js' }
不然的话,webpack在加载chunk的时候,路径会出错。
设置缓存
开始这个小节之前,可以先看下大神的一篇文章:大公司里怎样开发和部署前端代码。
对于静态文件,第一次获取之后,文件内容没改变的话,浏览器直接读取缓存文件即可。那如果缓存设置过长,文件要更新怎么办呢?嗯,以文件内容的MD5作为文件名就是一个不错的解决方案。来看下用webpack应该怎样实现
output:{ path:xxx, publicPath:yyy, filename:'[name]-[chunkhash:6].js' }
打包后的文件名加入了hash值
constbundler=webpack(config) bundler.run((err,stats)=>{ letassets=stats.toJson().assets letname for(leti=0;i{ if(err){ fs.mkdirSync(config.buildTemplatePath) } writeTemplate(name) }) })
手动调用webpack的API,获取打包后的文件名,通过writeTemplate更新html代码。完整代码猛戳gitst。
这样子,我们就可以把文件的缓存设置得很长,而不用担心更新问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。