vue项目优化--使用CDN和Gzip

Object 发布于2019-06-21 16:10 / 3408人阅读

摘要：使用构建的项目，在打包发布的时候，发现打包后的文件体积很大，使用分析后，发现占用空间最多的是引用的第三方依赖。具体实现以我个人项目为例我的项目中引入了以下模块。

使用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

删除依赖
这些依赖以前是使用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
主要是webpack里compression-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
        }
        }

构建项目，重启服务。
然后就享受页面秒开的算酸爽吧.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/10975.html

vue项目优化--使用CDN和Gzip

摘要：使用构建的项目，在打包发布的时候，发现打包后的文件体积很大，使用分析后，发现占用空间最多的是引用的第三方依赖。具体实现以我个人项目为例我的项目中引入了以下模块。使用vue-cli构建的vue项目，在打包发布的时候，发现打包后的文件体积很大，使用webpack-bundle-analyzer分析后，发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入，这样...

番茄西红柿 2019-07-16 14:29 评论0 收藏0
VUE单页应用首屏加载速度优化方案

摘要：所以前端使用压缩是没有起作用的。影响，选项显示警告在删除没有用到的代码时不输出警告删除所有的语句还可以兼容浏览器内嵌定义了但是只用到一次的变量提取出出现多次但是没有定义成变量去引用的静态值此方法有待实践，留待下次分享单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方（如...

lewif 2019-08-23 11:30 评论0 收藏0
VUE单页应用首屏加载速度优化方案

摘要：所以前端使用压缩是没有起作用的。影响，选项显示警告在删除没有用到的代码时不输出警告删除所有的语句还可以兼容浏览器内嵌定义了但是只用到一次的变量提取出出现多次但是没有定义成变量去引用的静态值此方法有待实践，留待下次分享单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方（如...

jubincn 2019-07-25 14:25 评论0 收藏0
前端性能优化与上线

摘要：看下状态可以看到我已经有一些镜像了我已经删除了拉镜像正常即可，中间那段是中国镜像源，我们成功下来了的镜像。攻破像我这样屌丝的服务器一般都买的，大的资源文件不住，一个动辄的文件这很蛋疼，不上很难受。 4000字长文，多图预警！！！流量慎入！！性能优化 - 屌丝前端性能优化、上线一条龙大家好我又来了，本章给大家带来的内容是：上线和上线后的性能优化项目地址实战预览地址实战项目地址...

wupengyu 2019-06-28 16:51 评论0 收藏0
vue 博客优化，服务端渲染(SSR)指南

摘要：现在我们需要在服务端和浏览器之间开启一个中间层用于服务端渲染。问题设置的配置文件这样我们的层才能获取到的，并在客户端将登陆时将保存下来，同时返回给客户端。这样用户在刷新页面时，会通过并带上请求服务器获取数据。 vue 博客优化，服务端渲染(SSR)指南对已有的单页应用进行改造，优化，使之成为一个具有良好seo的应用 github地址WdBly博客地址安装 git clone htt...

KnewOne 2019-08-23 13:00 评论0 收藏0