(转)：优化webpack打包vendor体积

转载自：https://segmentfault.com/q/1010000008832754

 

1.使用externals选项，使用script标签引用公共库

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

 

2.可利用，webpack.DllReferencePlugin webpack.DllReferencePlugin 将常用不怎么变更的文件，打入一个统一的文件，外链使用。这个主要作用也可用来缩小包构建的时间；

可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构，十分牛掰（最新 Vue-cli 带有此配置）；在 package.json 中配置如下命令 npm run analyz，运行即可查看之：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

对此可以分析研究，采取办法过滤掉重复的内容等... ... 其他还有诸如开启压缩啦，开启 Gzip 之类等等，来减小包的体积。