vue打包,首屏加载优化

vue打包后，通常首屏加载过慢vendor.js 过大这里我只介绍两种优化明细的方法

1.cdn 替换静态资源减少打包体积

• 定义cnd 数组 (ps:数组要与剔除资源对应)

const cdn = {
	css: [
	"https://unpkg.zhimg.com/element-ui@2.13.2/lib/theme-chalk/index.css"
	],
	js: [
	"https://unpkg.zhimg.com/vue@2.6.10/dist/vue.min.js",
	"https://unpkg.zhimg.com/vuex@3.0.1/dist/vuex.min.js",
	"https://unpkg.zhimg.com/vue-router@3.0.3/dist/vue-router.min.js",
	"https://unpkg.zhimg.com/echarts@4.7.0/dist/echarts.min.js",
	"https://unpkg.zhimg.com/axios@0.19.2/dist/axios.min.js",
	"https://unpkg.zhimg.com/element-ui@2.13.2/lib/index.js"
	]
}

• 选择需cnd替换的依赖不打进包内

configureWebpack: config => {
	if (process.env.NODE_ENV === "production") {
		// 用cdn方式引入
		config.externals = {
		"vue": "Vue",
		"vuex": "Vuex",
		"axios": "axios",
		"vue-router": "VueRouter",
		"echarts": "echarts",
		"element-ui":"element-ui"
		}
	}
}

• 注入cdn

//vue.config.js 
chainWebpack: config => {
if (process.env.NODE_ENV === "production") {
config.plugin("html").tap(args => {
// 生产环境或本地需要cdn时，才注入cdn
args[0].cdn = cdn
return args
})
}
}

//index.html
//建议注入head
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="stylesheet"
/>
<% } %>
//建议body底部
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->

2.gzip压缩 代码 (需配置服务端)

• 安装 compression-webpack-plugin

   npm install --save-dev compression-webpack-plugin

• 定义需压缩文件类型

configureWebpack: config => {
	if (process.env.NODE_ENV === "production") {
		const CompressionWebpackPlugin = require("compression-webpack-plugin")
		const productionGzipExtensions = ["html", "js", "css"]
		config.plugins.push(
		new CompressionWebpackPlugin({
			filename: "[path].gz[query]",
			algorithm: "gzip",
			test: new RegExp(
			"\.(" + productionGzipExtensions.join("|") + ")$"
			),
			threshold: 240, // 只有大小大于该值的资源会被处理 10240
			minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
			deleteOriginalAssets: false // 删除原文件
		})
		)
	}
}

配置服务端

server{
	gzip on;
	# 进行压缩的文件类型。
	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	# 是否在http header中添加Vary: Accept-Encoding，建议开启
	gzip_vary on;
}