vue项目打包及cdn优化
vue项目的打包上线及优化
项目完成,我们会将项目进行上线,同时为了提升性能,我们往往会进行一些优化处理
vue项目的打包
脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包
- 打开终端,切换到项目根目录
- 输入命令:npm run build
- 会在当前项目的根目录下生成一个dist文件夹,里面就是打包后的文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8SEbzNir-1604972353525)(img\01-打包后的文件目录及文件结构.png)]
项目托管
我们可以创建一个简易的node服务器来托管打包后的项目,这样就可以模拟访问服务器的项目
1.创建一个新的目录做为服务器根目录
2.将刚刚打包生成的dist目录整体拷贝到node服务器目录下
3.资源在dist目录下,所以可以使用静态资源托管的方式提供资源,将dist目录做为资源托管目录
express创建服务器
var express = require('express')
const path = require('path')// 2. 创建服务器
var app = express();// 托管静态资源
// 也可以将所有静态资源放置到指定的目录下,如public,然后添加以下的配置
app.use(express.static('dist'))
app.use('/', express.static(path.join(__dirname, 'dist')))// 3. 开启服务器并监听端口
app.listen(3001, () => {console.log('http://127.0.0.1:3001')
})
启动服务器
在服务器目录下输入node app.js
在浏览器中输入服务器地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8uIJu0w2-1604972353532)(img\02-访问服务器资源.png)]
项目的常见优化
项目打包之后,会将之前所使用到的部署依赖包和项目中使用到的外部资源都打包
如果之前引入的包很多,或者引入的不必需的包,那么会增大项目的体积,从而造成用户访问的时候需要请求更多的数据才能正常的访问,不利于用户体验,所以需要对打包过程进行优化
一般情况下我们可以从优化代码的方面对项目进行优化,也可以使用类似cdn的方式对项目进行优化
脚手架中提供了一个命令,可以让我们看到项目的资源的分布(占用)情况:npm run build – --report
生成项目报告文件
npm run build – --report
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cnn053Qu-1604972353540)(img\03-生成report页面.png)]
打开报告页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEqmcTOw-1604972353546)(img\04-一个报告页面.png)]
1.报告页面中,越大的块说明这个模板占用的体积越大 2.占用体积越越大的模块,我们要考虑不将其打包到产品中
cdn加速优化
cdn: CDN的本质上是将媒体资源,动静态图片(Flash),HTML,CSS,JS等等内容缓存到距离你更近的IDC,从而让用户进行共享资源,实现缩减站点间的响应时间等等需求,而网游加速器的本质则是通过建立高带宽机房,架设多节点服务器来为用户进行加速。
我们可以将一些大体积的模块,让cdn帮我们提供相应的资源,这样就可以缓解我们自己的服务器的压力,同时提供更快更好的资源响应
vue.config.js
在脚手架项目中,如果想增加自己的项目配置,可以在根目录下添加vue.config.js文件,在这个文件中实现自定义的配置
在打包的时候,这个配置会和脚手架的配置组合到一起
添加包的排除
module.exports = {configureWebpack: {externals:{'vue': 'Vue','element-ui': 'ELEMENT','quill': 'Quill'}},
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kRW0kUg3-1604972353551)(img\05-添加包的排除.png)]
可以看到,打包后的项目体积显著的减少,但是,问题并没有解决,由于没有这些包,打包后的项目并不能运行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E5Waztx8-1604972353556)(img\06-项目中没有需要的依赖包.png)]
这是因为,现在打包的项目中,已经没有Vue这个包了,所以才会出现错误,我们现在需要使用cdn的方式来提供这些资源
添加cdn的用户自定义
let cdn = {css: [// element-ui css'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表// 富文本框插件样式'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'],js: [// vue must at first!'https://unpkg.com/vue/dist/vue.js', // vuejs// element-ui js'https://unpkg.com/element-ui/lib/index.js', // elementUI// 富文本框插件'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js']
}
通过插件将资源自动的添加到页面中
挂载资源到插件
module.exports = {// 添加打包排除,说明以下配置中的包将来不会打包到项目中configureWebpack: {externals},// 将cdn的资源挂载到插件上chainWebpack (config) {config.plugin('html').tap(args => {args[0].cdn = cdnreturn args})}
}
在页面中使用插件添加指定的cdn资源
添加css引入(head结构中)
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %><link rel="stylesheet" href="<%=css%>" /> <% } %>
添加js引入(body结构中)
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %><script src="<%=js%>"></script> <% } %>
重新打包,OK
设置只有产品阶段才使用cdn
在项目开发的时候,其实没有必要使用cdn,这样反而会让我们的页面加载效率下降,同时也不适合本地开发(需要连网)
我们可以根据环境变量进行相应的处理,只有在产品的时候,才让插件去自动注入相应的资源文件到html页面
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境let externals = {'vue': 'Vue','element-ui': 'ELEMENT','quill': 'Quill'
}let cdn = {css: [// element-ui css'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表// 富文本框插件样式'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'],js: [// vue must at first!'https://unpkg.com/vue/dist/vue.js', // vuejs// element-ui js'https://unpkg.com/element-ui/lib/index.js', // elementUI// 富文本框插件'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js']
}cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}module.exports = {// 添加打包排除,说明以下配置中的包将来不会打包到项目中configureWebpack: {externals},// chainWebpack (config) {config.plugin('html').tap(args => {args[0].cdn = cdnreturn args})}
}
ports = {
// 添加打包排除,说明以下配置中的包将来不会打包到项目中
configureWebpack: {
externals
},
//
chainWebpack (config) {
config.plugin(‘html’).tap(args => {
args[0].cdn = cdn
return args
})
}
}
vue项目打包及cdn优化相关推荐
- vue项目打包优化策略
vue项目打包优化策略 使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以 ...
- 记一次vue项目打包优化
目录 前言 一.优化静态资源 二.vue项目打包体积优化 1.路由懒加载 2.抽离第三方js库 3.小结 三.代码优化 1.减少页面的重排和重绘 2.多设置key值 四.服务器优化 1.nginx服务 ...
- 前端Vue项目打包性能优化方案
文章目录 一.前言 二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件 三.工具推荐 可视化分析包大小 总结 一 ...
- 快速解决Vue项目打包后文件过大问题
快速解决Vue项目打包后文件过大问题 为什么打包后文件过大? 如何快速解决 一.路由懒加载[使用es6提案的import()方式] 二.CDN引入 为什么打包后文件过大? 移动app项目,使用vue- ...
- Vue项目打包步骤详细流程,新手必需掌握的知识点!
Vue项目打包步骤 Vue项目打包流程介绍 生成打包报告 修改默认配置 指定打包入口 通过external加载外部CDN资源 优化组件库的打包 首页内容定制 路由懒加载 Vue项目打包流程介绍 新手必 ...
- vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记 前端打包 打包的代码如何运行 打包指定不同的环境变量(开发,测试) 打包手动配置文件 打包压缩,大文件处理 gzip进一步压缩 打包app 打包部署模式 vu ...
- vue项目的首屏优化策略
虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用 1.使用路由懒加载 首屏进入时,直接加载和首屏相关路由,其他全部路由组件实现懒加载,即打开该路由时再去加 ...
- electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能 原因 在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
- vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改c ...
最新文章
- html页面在ie上出现404怎么解决,如何解决自定义404页面在IE等浏览器中无法显示问题...
- Linux的notifier机制在TP中的应用【转】
- linux通过SSH连接的SSH加密原理(笔记自用)
- java 虚拟机 参数_Java虚拟机的参数
- 【转】匈牙利命名法(Hungarian Notation)
- EF 学习 实用脚本
- Dom4j使用Xpath语法读取xml节点
- php 递归创建目录、递归删除非空目录、迭代创建目录
- Redis:20---常用功能之(发布与订阅)
- pip下载速度慢的解决办法
- linux dump 分析工具,使用 Crash 工具分析 Linux dump 文件
- 简单使用apipost和jmeter 测试接口
- 5s管理常用工具汇总
- 基金实时盈亏展现的接口和网页 java
- [Shiro教程] Shiro 教程基于SSM(SpringMVC + Spring + Mybatis)EHCache版本
- html用手机什么软件能编写,目前编写一款简单的手机应用APP一般用什么编程语言?...
- Unity VR开发教程 OpenXR+XR Interaction Toolkit (五) UI
- Tomcat异常,tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededException
- 2020 ICPC沈阳站-D,H
- chrome浏览器不支持video标签,不能自动播放。
热门文章
- VMware的“Intel VT-x is disabled”解决方法
- android联想云服务,联想云服务app下载-联想云服务手机客户端(原乐同步)下载 v5.5.10.99 官方安卓版-IT猫扑网...
- 【UOS操作系统】dd刻录镜像
- pyqt5多窗口来回切换
- mount: special device /dev/vgdata/lv_ora does not exist,centos系统LV status状态为Not avaliable问题排查及处理
- Linux使用双向链表实现图片、音乐、视频的切换和删除功能
- 033 Rust死灵书之重构Vec
- 解决无线网卡打不开的问题(by quqi99)
- 在线数值计算 wolframalpha
- Notes Fifth Day-渗透攻击-红队-信息收集