使用vue-cli生成的vendor.js文件太大,有办法减少体积吗?
vue-cli生成的文件vendor.js体积太大
看到vue-cli的webpack配置,应该是将所有的库打包到了vendor中,引用的库太多时,vendor的体积会很大,有办法控制打包的体积超过一定值时,分成多个文件打包吗?或者通过配置将部分库抽离出来,打包成另外的文件。
下面的代码是vue-cli生成vendor的代码:
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
},
}),
如何减少vue-cli生成文件vendor.js体积大小的方法
首先,在写 Vue 的时候,应该采用懒加载模式,之后生成的包,就会被打入到不同分组的 js,运行时按需加载,详情见:Vue-路由懒加载;这个意义重大!
其次,可利用,webpack.DllReferencePlugin
webpack.DllReferencePlugin
将常用不怎么变更的文件,打入一个统一的文件,外链使用。这个主要作用也可用来缩小包构建的时间;这个网上教程蛮多,就不赘述。也可参见这个项目 jade-blog 来配置;这一步即是你通过配置将部分库抽离出来,打包成另外的文件。
再次,可以利用 webpack-bundle-analyzer
可以分析打包后生成的文件结构,十分牛掰(最新 Vue-cli
带有此配置);在 package.json
中配置如下命令 npm run analyz,运行即可查看之:
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
对此可以分析研究,采取办法过滤掉重复的内容等... ... 其他还有诸如开启压缩啦,开启 Gzip
之类等等,来减小包的体积。
当然也可以从另一个维度来精细解决,即代码角度。非必需库可以不与引用,比如已经退出历史舞台的 JQuery
,还有 momont
等。再有就是合理的去写,比如组件复用,合乎时宜的去使用混合诸次等等。
GoogleChromeLabs
团队在 Github
上有建设仓库:Optimize your libraries with webpack,对于如何更好的使用 Webpack
,在写代码层面上,给出了很多不错的建议,值得一读,这有助于更进一步的减少打包文件的体积。
对于这个问题,有写两篇文章,分别对体积和速度方面优化,予以探究,欢迎一起探讨:
文章来源:https://segmentfault.com/q/1010000008832754