zoukankan      html  css  js  c++  java
  • vue项目优化--使用CDN和Gzip

    使用vue-cli构建的vue项目,在打包发布的时候,发现打包后的文件体积很大,使用webpack-bundle-analyzer分析后,发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入,这样就能大大缩小项目文件的体积。

    具体实现(以我个人项目为例)
    我的项目中引入了以下模块vue vue-router vuex axios moment highlight.js

    引入cdn文件

    我使用的是bootcdn
    其中moment.js需要额外引入中文语言
    highlight.js需要引入自己需要的语言
    我的项目中会展示javascript/html/css/bash/markdown (html支持需要引入xml)

    //index.html
    
     <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
      <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
      <script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js"></script>
      <script src="https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/bash.min.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/xml.min.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/css.min.js"></script>
      <script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/markdown.min.js"></script>
    

      删除依赖
    这些依赖以前是使用npm安装,现在需要在项目文件注释掉(或直接删除这些依赖),所有用到这些你需要替换的第三方依赖文件的代码都需要删除或注释

    eg:
    // import Vue from 'vue'
    // import VueRouter from 'vue-router'
    

      然后在webpack的配置文件里加入如下代码

     externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'moment': 'moment',
        'highlight.js': 'highlight.js'
      }
    

      注意后面的名称是改模块暴露出来的名称,具体不熟悉的可以到引入的js源码里查看。

    开启gzip加速

    打包时,可以将config/index.js文件的productionGzip设置为true
    主要是webpackcompression-webpack-plugin模块的实现。

    使用node服务器需要安装 compression模块

    express实现
    const compression = require('compression')
    const express = require('express')
    const app = express()
    app.use(compression({ threshold: 9 }))
    

      nginx实现

     //conf文件里
      server {
            listen       8088;
            server_name  localhost;
            location / {
                gzip on;
                gzip_min_length 1k;
                gzip_buffers 16 64k;
                gzip_http_version 1.1;
                gzip_comp_level 9;
                gzip_types text/plain text/javascript application/javascript image/jpeg image/gif image/png application/font-woff application/x-javascript text/css application/xml;
                gzip_vary on;
                root   /xxx/xxx/xxx;
                index index.html
            }
            }
    

      构建项目,重启服务。

    然后就享受页面秒开的算酸爽吧.

    eg:
    // import Vue from 'vue'
    // import VueRouter from 'vue-router'
    爱生活、爱编程!
  • 相关阅读:
    [Android 4.4.4] 泛泰A850 三版通刷 Mokee4.4.4 KTU84P 20140626 RC2.2 by syhost
    YUV12(420) (from)to RGB24
    Python图像处理(16):图像金字塔
    内存管理笔记(分页,分段,逻辑地址,物理地址)【转】
    Linux内核分析--内核中的数据结构双向链表【转】
    标准IO与文件IO 的区别【转】
    Linux中设备号及设备文件【转】
    静态编译和动态编译的区别【转】
    嵌入式系统 Boot Loader 技术内幕【转】
    理解 Linux 的硬链接与软链接【转】
  • 原文地址:https://www.cnblogs.com/liliuyu/p/11773135.html
Copyright © 2011-2022 走看看