vue的打包优化

1. 打包分析

yarn run build --report

File 									Size 				Gzipped
dist\js\chunk-vendors.df6b5bce.js 		141.57 KiB 49.51 KiB
dist\js\app.137e0acc.js 				28.41 KiB 		6.70 KiB
dist\css\app.3773b4e0.css 				186.20 KiB 32.70 KiB

以上命令，build 后会生成report.html, 该文件显示引用的依赖包大小。

主要为vue库大。

2.优化vue为 cdn方式引入

• a） index.html 中引用vue

<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>

• b) 配置webpack ：在vue.config.js中：

module.exports = {
configureWebpack: {//添加此段
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter'
		}
	}
}

对比大小

yarn run build --report

File 								Size 		Gzipped
dist\js\chunk-vendors.d6ca599e.js 	51.15 KiB 	17.49 KiB
dist\js\app.6d94d7ec.js 			28.47 KiB 	6.74 KiB
dist\css\app.ae7c6eb5.css 			186.20 KiB 	32.70 KiB

chunk-vendors js小了 90K.

转自简书：https://www.jianshu.com/p/e0aed586dcd9