代码结构方面
- 防抖，节流
打包相关优化
原文链接-https://www.jianshu.com/p/476387c7fea3
使用cdn加速
- 第一步首先配置cdn资源
// vue.config.js
const prod = process.env.NODE_ENV === 'production'
// 配置cdn
const cdn = {
// 构建忽略资源
externals:{
vue:'Vue',
echarts:'echarts'
},
js:[
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
'https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js'
]
}
module.exports = {
chainWebpack: config => {
if(prod){
// 生产环境在index.html中使用script引入相关cdn资源
config.plugin('html').tap(args => {
args[0].cdn = cdn;
return args;
})
}
},
这时候直接去打包，打包不会报错误，但是运行本地打包后的index.html会报错误，使用cdn的资源没有，打开index.html文件发现没有使用script引入cdn资源
image.png
- 第二步在index.html中使用
<!DOCTYPE html>
<html lang="en">
<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" />
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="stylesheet"
/>
<% } %>
<!-- 使用CDN的CSS文件 -->
<title>vuecli3项目优化</title>
</head>
<body>
<noscript>
<strong
>We're sorry but cli3_base doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- 使用CDN的JS文件 -->
<!-- built files will be auto injected -->
</body>
</html>
再次打包，打开index.html发现项目正常运行，打开chrome控制台network我们使用cdn的资源都正常请求到了
生产环境取消console.log
刚开始使用'uglifyjs-webpack-plugin' ,打包出现报错 warnings is not a supported option,查找了相关问题，是版本太高，使用1x版本就不会有问题，所有我选择使用 'terser-webpack-plugin'
- 第一步 安装依赖：cnpm install --save-dev terser-webpack-plugin
- 第二步 vue.config.js 引入
//vue.config.js
// 使用‘terser-webpack-plugin’ 而没有用uglifyjs-webpack-plugin 是因为uglifyjs2x版本在忽略console时会报错，需要降版本
const TerserPlugin = require('terser-webpack-plugin');
configureWebpack: config => {
// 生产环境配置
if(prod) {
// 使用cdn引入的资源，构建时不参与打包
config.externals = cdn.externals;
// 取消console
config.plugins.push(
new TerserPlugin({
terserOptions:{
// 生产环境自动删除console
ecma: undefined,
warnings:false,
compress:{
drop_console: true,
drop_debugger: false,
pure_funcs:['console.log','debugger']
}
},
sourceMap:false,
})
)
}
}
}
压缩代码
使用terser-webpack-plugin会帮我们把代码进行压缩，但此时代码体积还是很大，我们就需要使用gzip压缩
gzip压缩
- 第一步安装依赖：cnpm install --save-dev compression-webpack-plugin
- 配置了gzip压缩，正常打开index.html 发现请求压缩的文件 Content-Encoding: gzip，需要nginx或者后台去解压，暂时没有解决办法
//vue.config.js
// 使用‘terser-webpack-plugin’ 而没有用uglifyjs-webpack-plugin 是因为uglifyjs2x版本在忽略console时会报错，需要降版本
const CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
// 生产环境配置
if(prod) {
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
}
缓存
原文链接-https://www.cnblogs.com/tugenhua0707/p/10841267.html
ginx配置缓存的优点：可以在一定程度上，减少服务器的处理请求压力。比如对一些图片，css或js做一些缓存，那么在每次刷新浏览器的时候，就不会重新请求了，而是从缓存里面读取。这样就可以减轻服务器的压力。
nginx可配置的缓存又有2种：
1）客户端的缓存(一般指浏览器的缓存)。
2）服务端的缓存(使用proxy-cache实现的)。
客户端的缓存一般有如下两种方式实现：
协商缓存和强缓存
网友评论