vue项目优化--使用CDN和Gzip
使用vue-cli构建的vue项目,在打包发布的时候,发现打包后的文件体积很大,使用webpack-bundle-analyzer
分析后,发现占用空间最多的是引用的第三方依赖。第三方的依赖文件可以使用cdn外链的方式引入,这样就能大大缩小项目文件的体积。预防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.j
s文件的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://segmentfault.com/a/1190000013239622
vue项目优化--使用CDN和Gzip的更多相关文章
- vue项目优化与上线
一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2 ...
- Vue项目优化首屏加载速度
Vue项目部署上线后经常会发现首屏加载的速度特别慢:那么有那写能做的简单优化呢 一.路由的懒加载 路由懒加载也就是 把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件. 结合 ...
- Vue 项目优化,持续更新...
一.减少打包的体积 通过vue-cli 初始化项目后,使用 npm run build 生成的JS文件往往会很大,加载时间过长导致页面长时间白屏,所以我们尽可能的使用一下方法来减少打包体积. 1.1 ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- vue项目优化之按需加载组件-使用webpack require.ensure
require-ensure和require-amd的区别: require-amd 说明: 同AMD规范的require函数,使用时传递一个模块数组和回调函数,模块都被下载下来且都被执行后才执行回调 ...
- vue项目中获取cdn域名插件
import axios from 'axios' let CdnPath = {} CdnPath.install = function (Vue, options) { Vue.prototype ...
- vue项目优化,加快服务器端渲染速度
1. CSS在开发模式中用import,在打包后用CDN min.js中做如下操作 if (process.env.NODE_ENV == 'development') { require('../x ...
- vue项目优化之路由懒加载
const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...
- vue项目优化
cross-env 包环境 静态文件分离 require 是置顶的 双斜杠 //baidu.com可以是http也可以是https require.ensure打包到不同的文件中 项目文件路径规范 ...
随机推荐
- HDU 1912
坑,直接把公路看成X轴来做,然后,排序扫描一下,你懂的. #include <iostream> #include <algorithm> #include <cstdi ...
- ZOJ 3527
这题难在破环. 对于不是环的情况,只需按照一般的树形DP来做,一步一步往根递推就可以了.对于环,则枚举其中一点的两种情况,取或不取,然后再递推,就可以了.当到达某结点的下一结点为环开始的点时,退出即可 ...
- HDU 1198 Farm Irrigation (并查集优化,构图)
本题和HDU畅通project类似.仅仅只是畅通project给出了数的连通关系, 而此题须要自己推断连通关系,即两个水管能否够连接到一起,也是本题的难点所在. 记录状态.不断combine(),注意 ...
- oc6--类方法
// // main.m // 第一个OC类-类方法 #import <Foundation/Foundation.h> // 1.编写类的声明 @interface Iphone : N ...
- 0x66 Tarjan算法与无向图联通性
bzoj1123: [POI2008]BLO poj3694 先e-DCC缩点,此时图就变成了树,树上每一条边都是桥.对于添加边的操作,相当于和树上一条路径构环,导致该路径上所有边都不成为桥.那么找这 ...
- The current .NET SDK does not support targeting .NET Core 2.1. Either target .NET Core 2.0 or lower, or use a version of the .NET SDK that supports .NET Core 2.1.
C:\Program Files\dotnet\sdk\2.1.4\Sdks\Microsoft.NET.Sdk\build\Microsoft.NET.TargetFrameworkInferenc ...
- 我的spark python 决策树实例
from numpy import array from pyspark.mllib.regression import LabeledPoint from pyspark.mllib.tree im ...
- Spring配置之OpenSessionInViewFilter
转自:https://www.cnblogs.com/blogonfly/articles/3991782.html 参考: OpenSessionInViewFilter作用及配置:http://w ...
- C - Valera and Fruits
Problem description Valera loves his garden, where n fruit trees grow. This year he will enjoy a gre ...
- css网页布局方式的理解
一,标准流(默认状态,元素盒按照文档中出现的顺序排列) 块级元素--垂直排版 display:block; 单独一行,可以设置宽高,宽度默认和父元素宽度一致 一般结构性标记都为块级元素,如div,h, ...