(转):优化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
之类等等,来减小包的体积。
上一篇: 传智健康项目讲义第七章 六
下一篇: 用js判断图片地址是否有效