參考：
https://www.cnblogs.com/xidian-Jingbin/p/10643391.html
https://blog.csdn.net/weixin_43993065/article/details/105374325
https://blog.csdn.net/qq_39953537/article/details/82188438
刪除打包后的map文件
config/index.js 文件中將productionSourceMap 的值設(shè)置為false.
vue-router懶加載
{
path: '/404',
component: (resolve) => require(['@/views/features/404'], resolve),//懶加載
hidden: true
}
使用gzip壓縮
1图甜、npm install --save-dev compression-webpack-plugin
2、vue.config.js中修改
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
configureWebpack: config => {
// 生產(chǎn)環(huán)境下使用gzip
if (process.env.NODE_ENV === 'production') {
// 增加瀏覽器CPU（需要解壓縮）嚼摩， 減少網(wǎng)絡(luò)傳輸量和帶寬消耗 （需要衡量，一般小文件不需要壓縮的）
// 圖片和PDF文件不應(yīng)該被壓縮愿卒，因?yàn)樗麄円呀?jīng)是壓縮的了潮秘，試著壓縮他們會浪費(fèi)CPU資源而且可能潛在增加文件大小。
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // asset -> filename
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240, // 達(dá)到10kb的靜態(tài)文件進(jìn)行壓縮 按字節(jié)計(jì)算
minRatio: 0.8, // 只有壓縮率比這個值小的資源才會被處理
deleteOriginalAssets: false // 是否刪除壓縮的源文件
})
)
}
/*****------別名配置等柜候，可用return返回配置---------*****/
return {
name: name,
resolve: {
alias: {
'@': resolve('src'),
'@crud': resolve('src/components/Crud')
}
}
}
}
3躏精、再去nginx的/etc/nginx/nginx.conf里配置
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}
使用CDN引入資源，并更換為min版本
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet">
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js"></script>
</body>
</html>
tips：安裝 webpack-bundle-analyzer 插件，可以在打包時看到打包文件大小
