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

时间 2019-11-15

标签 vue+vuerouter+nginx+cdn vue vuerouter nginx cdn 项目优化实际总结栏目 Nginx 繁體版

原文原文链接

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

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

路由按需加载

webpack默认将全部js源代码打包成一个js文件，致使JS包会变得很是大，影响页面首次加载速度
按需加载能把不一样路由对应的组件分割成不一样的代码块，而后当路由被访问的时候才加载对应组件的js文件css

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
<body>
    <div id="app"></div>
    <% if (VUE_APP_ENV != "development") { %>
        <!-- 运行时依赖 -->
        <script src="//cdn.staticfile.org/vue/2.5.17/vue.runtime.min.js" type="text/javascript"></script>
        <script src="//cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js" type="text/javascript"></script>
        <script src="//cdn.staticfile.org/vuex/3.0.1/vuex.min.js" type="text/javascript"></script>
        <script>
            // 当cdn资源失效时，加载本地资源
            window.Vue || document.write('<script src="./vue.min.js"><\/script>');
        </script>
    <% } %>
</body>

nginx压缩

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

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的文件夹vue

nginx配置一句话便可java

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左右，开启压缩只剩下1Mwebpack

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