About vue packaging performance optimization

1.webpack-bundle-analyzer code volume analysis plugin

// 分析代码体积工具
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

// 代码分析插件
config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin).init(Plugin => new Plugin({
	analyzerMode: 'server', // 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
	analyzerHost: '127.0.0.1',
	analyzerPort: 3000,
	defaultSizes: 'parsed', // 模块大小默认显示在报告中。应该是`stat`，`parsed`或者`gzip`中的一个。
	openAnalyzer: true, // 在默认浏览器中自动打开报告
	logLevel: 'info' // 日志级别
}))

2.tree Shaking

vue-cli comes with tree Shaking function, you only need to quote it on demand, no need to configure "sideEffects": false in package.json,
secondly js, you need to use es6 export import grammar.
Insert picture description here

3.cdn resource loading

// 利用cdn加载
const assetsCDN = {
	// webpack build externals
	externals: {
		vue: 'Vue',
		'vue-router': 'VueRouter',
		vuex: 'Vuex',
		axios: 'axios'
	},
	css: [],
	// https://unpkg.com/browse/[email protected]/
	js: [
		'//cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js',
		'//cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js',
		'//cdn.jsdelivr.net/npm/[email protected]/dist/vuex.min.js',
		'//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js'
	]
}

configureWebpack: config => {
	if (IS_PROD) {
		// 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖
		config.externals = assetsCDN.externals
	}
},

chainWebpack: (config) => {
	if (IS_PROD) {
		// html中添加cdn
		config.plugin('html').tap(args => {
			args[0].cdn = assetsCDN
			return args
		})
	}
},

index.html

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<title><%= htmlWebpackPlugin.options.title %></title>
	<!-- 使用CDN的CSS文件 -->
	<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
	<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
	<% } %>

	<!-- 使用CDN的JS文件 -->
	<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
	<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
	<% } %>
</head>
<body>
<noscript>
	<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

4.UglifyJsPlugin js compression removal log

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: config => {
	if (IS_PROD) {
		const plugins = [];
		plugins.push(
			new UglifyJsPlugin({
				uglifyOptions: {
					compress: { // 启用压缩功能
						dead_code: true, // 移除没被引用的代码
						unused: true, // 干掉没有被引用的函数和变量
						drop_console: true, // 去除console.*函数
						drop_debugger: false, // 移除 debugger
						pure_funcs: ['console.log'], // 移除console
						passes: 1 //  默认 1。运行压缩的次数。在某些情况下，用一个大于1的数字参数可以进一步压缩代码大小。注意：数字越大压缩耗时越长。
					}
				},
				sourceMap: false,
				parallel: true  // 使用多进程并行运行来提高构建速度
			})
		);
		config.plugins = [...config.plugins, ...plugins];
	}
},

gzip optimization

Option 1: CompressionWebpackPlugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
plugins.push(
	// 仅使用 CompressionWebpackPlugin
	new CompressionWebpackPlugin({
		test: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件类型
		threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
		deleteOriginalAssets: false, // 是否删除原文件
		// filename: "[path].gz[query]",
		algorithm: "gzip",
		minRatio: 0.8
	})
);

This kind of .gz file will be generated after packaging. The
Insert picture description here
nginx configuration only needs to
gzip_static on;be configured. This configuration will directly read the .gz file generated by the front-end package.

If the front end does not generate a .gz file, nginx can also configure gzip as follows

# 开启和关闭gzip模式
gzip on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 2;
# 需要压缩的文件mime类型
gzip_types text/plain application/javascript application/x-javascript text/javascript texts application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# nginx做前端代理时启用该选项，表示无论后端服务器的headers头返回什么信息，都无条件启用压缩
gzip_proxied expired no-cache no-store private auth;
# 不启用压缩的条件，IE6对Gzip不友好，所以不压缩
gzip_disable "MSIE [1-6]\.";