vue项目首次访问加载页面太慢问题

问题：当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

    
        "utf-8">
        
        "viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        
        
        
        "stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
        


    
    
        
"app">
    

　　如果报错提示：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，

。