Vue+VueRouter+Nginx+CDN 项目优化实际总结

使用场景：目前这个项目要嵌入到APP中使用，项目用到router、vuex、axios等
目前现状：首次加载非常缓慢，等待时间超过8秒钟

我们目的：减少包体积、减少http请求次数，同时保证代码可用性、维护性、不变动业务代码

路由按需加载

webpack默认将所有js源代码打包成一个js文件，导致JS包会变得非常大，影响页面首次加载速度
按需加载能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的js文件

const home = () => import('@views/home/home')
// 或者
const home = (resolve) => {
    import('@views/home/home').then((module) => {
      resolve(module)
    })
}

部分走CDN

CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
如果公司没有考虑CDN，可以酌情将例如 vue vux vue-router 等不变动的资源使用第三方免费 CND 引入，并添加本地 fallback

//在vue.config.js中配置
configureWebpack: config => {
    if (isProd != 'development') {
        config.externals = {
            vue: 'Vue',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
        }
    }
}

在public/index.html

    

    <% if (VUE_APP_ENV != "development") { %>
        
        
        
        
        
    <% } %>

nginx压缩

目前有两种压缩方式，nginx压缩，客户端打包压缩在上传
1.nginx压缩
客户端啥都不用做直接上传打包的代码即可
就是每次请求时服务器先压缩再返回资源，对服务器性能有一定消耗

nginx.conf文件
http{
    #开启服务端压缩-损耗服务器cpu 
    gzip on; #开启gzip
    gzip_min_length 10k; #设置允许压缩的页面最小字节数; 这里表示如果文件小于10个字节，就不用压缩，因为没有意义，本来就很小
    gzip_buffers 4 16k; #设置压缩缓冲区大小，此处设置为4个16K内存作为压缩结果流缓存
    gzip_comp_level 3; #压缩级别，1-10，数字越大压缩的越好，也越占用CPU
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript; #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
    gzip_vary on; #选择支持vary header；改选项可以让前端的缓存服务器缓存经过gzip压缩的页面; 这个可以不写，表示在传送数据时，给客户端说明我使用了gzip压缩
    gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
}

2.客户端打包压缩在上传
在打包是需要配置vue.config.js

//需要安装 npm i compression-webpack-plugin -D
const CompressionWebpackPlugin = require('compression-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
    return {
         plugins: [
               new CompressionWebpackPlugin({
                   algorithm: 'gzip',
                   test: /\.(js|css)$/,// 匹配文件名
                   threshold: 10240, // 对超过10k的数据压缩
                   deleteOriginalAssets: false, // 不删除源文件
                   minRatio: 0.8 // 压缩比
                })
          ]
     }
}

打包出来的可能会带有.gz的文件夹

nginx配置一句话即可

nginx.conf文件
http{
    gzip_static on; #静态压缩
}

nginx设置缓存

#server模块一般对应在相对应的xxx.conf中,不建议都写在nginx.conf中
server{
    location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
        access_log   off; 
        expires      30d; // 天
    }

    location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
        access_log   off;
        expires      24h; // 小时
    }

    location ~* ^.+\.(html|htm)$ {
        expires      1h;
    }
}

实际效果

chunk-vendors.js可能会比较大，3M左右，开启压缩只剩下1M

上传代码到服务器打开浏览器测试,在公司wifi测试下，整个加载过程不超3秒

关于更多相关文章
vue项目总结
Vue cli 3.0项目优化总结Vue Router懒加载+按需引入+高可用CDN