Vue-Cli项目首次加载优化，网站性能和访问速度优化

 

目录

优化部署方式，压缩部署文件

修改组件引入方式为CDN引入

---

• 优化部署方式，压缩部署文件

1.  安装compression-webpack-plugin模块，执行一下命令安装该模块

npm install --save-dev compression-webpack-plugin

     2.修改vue.config.js文件，在文件中添加以下代码：

// 加到module.exports外面
const CompressionPlugin = require('compression-webpack-plugin')



 configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip',
                        test: /\.(js|css)$/, // 匹配文件名
                        threshold: 10240, // 对超过10k的数据压缩
                        deleteOriginalAssets: false, // 不删除源文件
                        minRatio: 0.8 // 压缩比
                    })
                ]
            }
        }
    },

   3.执行npm run build命令，在dist/static/目录下文件中有.gzip格式压缩文件

                                                               

 

   4.修改/etc/nginx/nginx.conf文件   

   5.效果对比，相比之前的6s，时间明显降下来了

       

   

• 修改组件引入方式为CDN引入

      研究了以下，发现这两个方法是不能共存的，只能二选一，还没找到可以两者并存的配置

  1.修改vue.config.js文件，删掉上一个方法加入的配置，新增以下配置：

const cdn = {
    css: ["https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css", "https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"],
    js: ["https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js",
        "https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js",
        "https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js",
        "https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js",
    ],
}




// 添加cdn引用包  module.exports内
    configureWebpack: {
        externals: {
            vue: "Vue",
            'vant': 'vant',
        }
    },

 2. 注释掉main.js中相对应的包的引用

3.上线，此时明显网站速度快了很多

总结

• 压缩方式相比于CDN依然受限于服务器带宽，因此，我最后选择了CDN的方式来加速站点；

• 网站优化对用户体验来说很重要；

• 不同版本vue-cli的配置也不相同；

• 欢迎各路大佬一起来探讨网站性能优化的各种方式；