关于vue打包性能优化（后续更新）

蔚落 2022-10-29 03:21 213阅读 0赞

## 1.webpack-bundle-analyzer 代码体积分析插件 ##

// 分析代码体积工具
    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自带tree Shaking功能，只需按需引用即可，无需在package.json中配置"sideEffects": false,  
其次js,需使用 es6 的 export import 语法才可以  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70 1]

## 3.cdn资源加载 ##

// 利用cdn加载
    const assetsCDN = {
    	// webpack build externals
    	externals: {
    		vue: 'Vue',
    		'vue-router': 'VueRouter',
    		vuex: 'Vuex',
    		axios: 'axios'
    	},
    	css: [],
    	// https://unpkg.com/browse/vue@2.6.10/
    	js: [
    		'//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
    		'//cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js',
    		'//cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js',
    		'//cdn.jsdelivr.net/npm/axios@0.19.0/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>
    	
    	<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    	<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    	<% } %>
    
    	
    	<% 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>
    
    </body>
    </html>

## 4.UglifyJsPlugin js压缩去除日志 ##

## gzip优化 ##

方案一：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
    	})
    );

这种在打包后会生成.gz文件  
![在这里插入图片描述][20210219150258833.png]  
nginx配置只需  
`gzip_static on;` 这种配置会直接读取前端打包生成的.gz文件

如果前端没有生成.gz文件，nginx也可以配置gzip如下

# 开启和关闭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]\.";

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70]: /images/20221024/9ad2e21ca73847d99a7040a69b8dfc6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDAxMzgxNw_size_16_color_FFFFFF_t_70 1]: /images/20221024/57e49db8d73448b1bd470bf01d7d7ff8.png
[20210219150258833.png]: /images/20221024/2aea88b643a744fe81d26f4c73c01f3b.png