問題：當vue項目發布后，在瀏覽器第一次打開訪問vue項目地址，導致第一次打開頁面時間太慢，好久都沒打開，一直在加載
借鑒博客：https://www.cnblogs.com/zyulike/p/11190012.html
解決辦法：
1、去掉編譯文件中的map文件 2、通過vue-router路由懶加載 3、使用CDN，可以減少代碼體積，加快請求速度
4、使用compression-webpack-plugin插件，修改配置文件，production環境下對超過10k的文件進行壓縮，nginx部署時開啟gzip
1、去掉編譯文件中的map文件
1.1、沒去.map文件之前，打包后的js目錄：有兩個很大的.map文件
1.2、在vue.config.js文件中配置代碼：
productionSourceMap: false, //去除vue打包后js目錄下生成的.map文件，用於加速生產環境構建
1.3、打包后的結果：兩個比較大的.map文件不存在了
2、vue-router路由懶加載
vue-router路由懶加載就是訪問其他頁面的時候才加載，進入當前頁面其他頁面先不加載，可以減少耗時。
懶加載路由配置：
非懶加載路由配置：
3、使用CDN
具體操作：
第一步：修改vue.config.js配置
// 修改vue.config.js 分離不常用代碼庫 module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === "production") { config.externals = { // 不會被打包的庫 'vue': 'Vue', 'vue-router': 'VueRouter', 'moment': 'moment' } } } }
或：如上面那種報錯不起作用，試試另一種寫法配置：
module.exports = {
context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'ElementUI': 'ELEMENT', 'axios': 'axios', } }
第二步：找到項目的public文件夾的/index.html中引入CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-manage-system</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
如果報錯提示：element未定義，解決辦法：vue.js需要在element-ui之前引入，所以vue.js也要改為CDN的引入方式
要刪除原先在js中的import引入，不刪除的話，項目還是會從node_modules中引入資源文件
4、關於compression-webpack-plugin插件的配置，和nginx的gzip配置
借鑒博客：https://blog.csdn.net/qq_31677507/article/details/102742196 （比較有用）
借鑒博客：https://blog.csdn.net/qq_37600506/article/details/111835555
借鑒博客：https://blog.csdn.net/weixin_46190955/article/details/116496108?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=1
4.1、vue項目安裝compression-webpack-plugin插件
cnpm install compression-webpack-plugin
最新的compression-webpack-plugin插件運行起來可能會報錯，找不到什么亂七八糟的屬性：
解決辦法：把此插件的版本降低
卸載原來的版本
npm uninstall compression-webpack-plugin
安裝5.0.1版本 npm i compression-webpack-plugin@5.0.1
因為使用的是jenkins自動打包，打包的時候報錯沒有找到compression-webpack-plugin，所以在項目的package.json配置文件里手動指定一下版本：
4.2、還要在vue.config.js文件中配置一下compression-webpack-plugin，內容如下：
const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
productionSourceMap: false, //去除vue打包后js目錄下生成的.map文件，用於加速生產環境構建
configureWebpack:{
resolve:{
alias:{
'@':path.resolve(__dirname, './src'),
'@i':path.resolve(__dirname, './src/assets'),
}
},
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// 下面是下載的插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
]
},
}
4.3、最后nginx開啟gzip壓縮，nginx的default.conf配置文件加入gzip配置內容如下：上面的借鑒博客中的gzip配置有問題，我自己又在網上找了一個，最后打包測試成功
gzip on; gzip_min_length 1k; gzip_buffers 16 64k; gzip_http_version 1.1; gzip_comp_level 6; #1-9,為9的話最大消耗服務器內存以提高訪問速度
gzip_types text/plain application/x-javascript text/css application/xml; gzip_vary on;
最后優化成功，瀏覽器刪除歷史記錄后，第一次訪問vue項目只花了1.7秒：谷歌瀏覽器
IE瀏覽器：
前端性能優化知識總結
1.減少http請求。如：合並css、js、
2.合理利用緩存功能。如：緩存常用圖片和css、js資源
3.合理安排內容渲染順序。如：css優先加載，js最后加載，部分資源按需加載
4.壓縮合並資源。如：壓縮圖片和js、css資源
5.減少對cookie的使用。如：cookie會在服務器和瀏覽器之間傳遞，導致資源浪費
6.優化代碼層面：如：盡量減少閉包和遞歸的使用，減少對DOM操作，避免嵌套循環和"死循環"，代碼盡量低耦合高內聚，注意定時器的及時清理，能使用css完成的動畫就不用js，
。