ElementUI项目优化上线
文章目录
- 介绍
- 项目优化
- 1、 生成打包报告
- 2、 通过 vue.config.js 修改 webpack 的默认配置
- 3、 为开发模式与发布模式指定不同的打包入口
- 4、 configureWebpack 和 chainWebpack
- 5、 通过 chainWebpack 自定义打包入口
- 6、 通过 externals 加载外部的 CDN 资源
- 7、 通过 CDN 优化 ElementUI 的打包
- 8、 首页内容定制
- 9、 路由懒加载
- 项目上线
- 项目上线的相关配置
- 总结
介绍
此优化说明主要针对的是通过 UI
界面创建的项目,对于通过命令行创建的项目具有一定的参考价值。
如果需要了解 Vue 的相关知识,可以查看我之前的文章。
项目优化
1、 生成打包报告
打包时,为了直观的发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种:
- 通过命令行参数的形式生成报告(不推荐)
// 通过vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report
- 通过可视化的
UI
面包直接查看报告(推荐)
在可视化的 UI
面板中,通过控制台
和分析
面板,可以方便的看到项目中存在的问题。
2、 通过 vue.config.js 修改 webpack 的默认配置
通过 vue-cli 3.0
工具生成的项目,默认隐藏了所有webpack 的配置项
,目的是为了屏蔽项目的配置过程,让程序员把工作的重心,放到具体的功能也业务逻辑的实现上。
如果程序员有修改 webpack
默认配置的需求,可以在项目根目录中, 按需创建 vue.config.js
这个配置文件,从而对项目的打包发布过程做自定义的配置(具体配置参考 https://cli.vuejs.org/zh/config/#vue-config-js)。
// vue.config.js
// 这个文件中,应该导出一个包含了自定义配置选项的对象
module.exports = {// 选项 ...
};
3、 为开发模式与发布模式指定不同的打包入口
默认情况下,Vue 项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js
)。为了将项目的开发过程发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:
- 开发模式的入口文件为
src/main-dev.js
- 发布模式的入口文件为
src/main-prod.js
4、 configureWebpack 和 chainWebpack
在 vue.config.js
导出的配置对象中,新增 configureWebpack
或 chainWebpack
节点,来自定义 webpack
的打包配置。
在这里,configureWebpack
和 chainWebpack
的作用是相同的,都是为了完成不同的打包入口,唯一的区别就是它们修改的 webpack
配置的方式不同:
- configureWebpack 通过
链式编程
的形式,来修改默认的webpack
配置 - chainWebpack 通过
链操作对象
的形式,来修改默认的webpack
配置
两者具体的使用差异,可参考如下网址:
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
5、 通过 chainWebpack 自定义打包入口
代码示例如下:
module.exports = {chainWebpack: (config) => {config.when(process.env.NODE_ENV === "production", (config) => {config.entry("app").clear().add("./src/main-prod.js");});config.when(process.env.NODE_ENV === "development", (config) => {config.entry("app").clear().add("./src/main-dev.js");});},
};
6、 通过 externals 加载外部的 CDN 资源
默认情况下,通过 import
语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。
为了解决上述的问题,可以通过 webpack
的 externals
节点,来配置并加载外部的 CDN
资源。凡是声明在 externals
中的第三方依赖包,都不会被打包。
实现的步骤如下:
- 添加配置代码,具体配置代码如下:
// 冒号前面的名字放到引用的from后,冒号后面的名字放在引用的import后面
config.set("externals", {vue: "Vue","vue-router": "VueRouter",axios: "axios",lodash: "_",echarts: "echarts",nprogress: "NProgress","vue-quill-editor": "VueQuillEditor",
});
main.js
中的引入调整如下:
// 只给出部分代码
// 导入富文本编辑器
import VueQuillEditor from "vue-quill-editor";// 导入 NProgress 包对应的JS和CSS
import NProgress from "nprogress";import axios from "axios";
- 需要在
public/index.html
文件的头部,添加如下的CDN
资源引用(主要是css
样式表):
<!-- nprogress 的样式表文件 -->
<linkrel="stylesheet"href="https://cdn.staticfile.org/nprogress/0.2.0/nprogressmin.css"
/>
<!-- 富文本编辑器 的样式表文件 -->
<linkrel="stylesheet"href="https://cdn.staticfile.org/quill/1.3.4/quill.core.mincss"
/>
<linkrel="stylesheet"href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.mincss"
/>
<linkrel="stylesheet"href="https://cdn.staticfile.org/quill/1.3.4/quill.bubblemin.css"
/>
- 需要在
public/index.html
文件的头部,添加如下的CDN
资源引用(主要是js
文件,配置文件–第一步中添加的):
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
配置完成后的代码如下所示:
完成以上步骤后,最终的编译效果如下:
7、 通过 CDN 优化 ElementUI 的打包
虽然在开发阶段,我们启用了 element-ui
组件的按需加载,尽可能的减少了打包的体积,但是那些被安需加载的组件,还是占用了比较大的文件体积。此时,我们可以将 element-ui
中的组件,也通过 CDN
的形式来加载,这样能够进一步减小打包后的文件体积。
具体的操作流出如下:
在
main-prod.js
中,注释掉element-ui
按需加载的代码在
index.html
的头部区域中,通过CDN
加载element-ui
的js
和css
样式
<!-- element-ui 的样式表文件 -->
<linkrel="stylesheet"href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css"
/><!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
8、 首页内容定制
不同的打包环境下,首页内容可能会有所不同。我们 可以通过插件的方式进行定制,插件配置如下:
chainWebpack: (config) => {// 发布模式config.when(process.env.NODE_ENV === "production", (config) => {config.plugin("html").tap((args) => {args[0].isProd = true;return args;});});// 开发模式config.when(process.env.NODE_ENV === "development", (config) => {config.plugin("html").tap((args) => {args[0].isProd = false;return args;});});
};
然后,在 public/index.html
首页中,可以根据 isProd
的值,来决定如何渲染页面结构:
<!-- 按需渲染页面的标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title><!-- 按需加载外部的 CDN 资源 -->
<% if(htmlWebpackPlugin.options.isProd){ %>
<!-- 通过 externals 加载的外部 CDN 资源 -->
<% } %>
9、 路由懒加载
当打包构建项目时,JavaScript
包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更高效了。
具体需要3步:
安装
@babel/plugin-syntax-dynamic-import
包。在
babel.config.js
配置文件中声明该插件。
- 将路由改为按需加载的形式,示例代码如下:
// 第一个参数是分组的名称,同一个组的一起加载
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
关于路由懒加载的详细文档,可参考如下链接:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
通过此方式可以减小最终的打包文件大小。
项目上线
项目上线的相关配置
- 通过
node
创建web
服务器。 - 开启
gzip
配置。 - 配置
htpps
服务。 - 使用
pm2
管理应用。
1、 过 node
创建 web
服务器
创建 node
项目,并安装 express
, 通过express
快速创建 web
服务器,将 vue
打包生成的 dist
文件夹,托管为静态资源即可,关键代码如下:
const express = require('express')// 创建 web 服务器
const app = express()// 托管静态资源
app.use(express.static('./dist'))// 启动 web 服务器
app.listen(80, () => {console.log('server running at http://127.0.0.1')
})
2、 开启 gzip
配置
使用 gzip
可以减小文件体积,使传输速度更快。
- 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下:
// 安装相应包
npm install compression -D// 导入包
const compression = require('compression')// 启用中间件
app.use(compression())
3、 配置 htpps
服务
注意:此服务器是由后端开发进行开启,放在这里知识为了让前端了解一下
为社么要启用HTTPS服务器?
- 传统的 HTTP 协议传输的数据都是明文,不安全
- 采用 HTTPS 协议对传输的数据进行了加密处理,可以防止数据被中间人窃取,使用更安全
申请 SSL 证书(https://freesqsl.org)
注意:公司中使用的
SSL
证书都是收费的
步骤如下:
- 进入 https://freesqsl.cn/ 官网,输入要申请的域名并选择品牌。
- 输入自己的邮箱并选择相关选项。
- 验证 DNS (在域名管理后台添加
TXT
记录)。 - 验证通过后,下载
SSL
证书(full_chain.pem
公钥;private.key
私钥)。
在后台项目中导入证书
const https = require('https')
const fs = require('fs')const options = {cert: fs.readFileSync('./full_chain.pem'),key: fs.readFileSync('./private.key')
}https.createServer(options, app).listen(443)
4、 使用 pm2 管理应用
- 在服务器中安装 pm2 :
npm i pm2 -g
- 启动项目:
pm2 start 程序入口脚本 --name 自定义名称
- 查看运行项目:
pm2 ls
- 重启项目:
pm2 restart 自定义名称
- 停止项目:
pm2 stop 自定义名称
- 删除项目:
pm2 delete 自定义名称
命令运行效果图如下:
在 Windows 上可以直接在 IIS 中进行发布,不需要什么特别的配置既可以使用(不会的自行百度了解)
总结
以上内容通过视频学习和其他网络相关资料总结,一是为了记录学习的内容,怕以后忘记或想使用的时候找不到,另一个也是像作为一个分享的东西,希望可以帮助到他人吧。
ElementUI项目优化上线相关推荐
- 前端学习(2735):重读vue电商网站45之项目优化上线
优化Vue项目,部署Vue项目 项目优化 添加进度条 nprogress 进度条官方文档传送门 打开 vue-ui 面板,选择依赖,输入 nprogress 进行安装相关依赖. npm Javascr ...
- Vue-cli 项目优化归纳(打包、源码、用户体验)
前言:vue-cli项目开发打包部署后,存在问题有首次首页加载过慢,包括加载缓慢问题,需要进行vue项目优化.下面是对vue性能优化方法进行归纳,后面会对方法进行亲测. 主要包括:代码包打包优化.编码 ...
- java优化登录注册,Java-Web(项目)优化登录注册
Java-Web(项目)优化登录注册 Java-Web(项目)优化登录注册 实现代码: package com.homework.dao1; public interface Login { publ ...
- Vue项目优化打包——前端加分项
前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载 为什么需要路由懒加载 当刚运行项目的时 ...
- 从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
- 物美集团携手SAP ERP项目成功上线(转)
物美集团携手SAP ERP项目成功上线 2008-01-24 07:04:55 来源:赛迪网 中国领先的民族零售企业集团--物美集团ERP项目(WINBOX)在旗下所有配送中心.大卖场.综超和便超成功 ...
- 学习【瑞吉外卖⑪】SpringBoot单体项目_项目优化
若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 本人写这篇博客旨在制作学习笔记,巩固知识.同时方便个人在线阅览,回顾知识. 这篇博客中主要对应[瑞吉外卖项 ...
- 两年沉淀,我的开源项目已上线!
转载请注明出处:https://blog.csdn.net/guolin_blog/article/details/84886691 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 ...
- 关于vue+element-ui项目的分页,返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 参考文章: (1)关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 (2)https://www.cn ...
最新文章
- 【转】eclipse android 设置及修改生成apk的签名文件 -- custom debug keystore
- 发现 ASP.Net 的一个关于回车提交的 Bug ? 必须多于一个 Text 域回车提交,Server: ButtonX_Click 才能截获!...
- Lucene分析过程指南
- Android官方技术文档翻译——Gradle 插件用户指南(5)
- 兰州职称计算机中心,【兰州2013年职称计算机考试报名通知】- 环球网校
- Linux安装tomcat8
- angularJS与IE8整合简介
- canvas系列 — canvas常用API介绍
- 私募基金相关知识介绍(一)——TOT
- [转]一些漢字、字體/字型、内碼、輸入法資料的整理
- python爬虫Selenium批量关注微博用户
- web.py mysql_webpy连接mysql出现问题
- 用unity制作简单的AR,亲测有效
- 红亚2015-3月杯季赛 CTF题部分writeup
- 【转载】优雅抒情的浪漫小提琴曲
- libcurl简单接口的使用(FTP)
- IOC-IOC的简单介绍
- 操作系统——存储器管理
- 用 TensorFlow.js 在浏览器中训练一个计算机视觉模型(手写数字分类器)
- 深入理解Java虚拟机 第2版 周志明著(三)
热门文章
- python音频特征提取_使用Python对音频进行特征提取
- win python 怎么打开建立一个孤立的进程_python实现在windows服务中新建进程的方法...
- 向mysql中插入时间_Java向mysql中插入时间的方法
- linux 解压 视频插件,linux下压缩解压缩命令
- 自动化学matlab,自动化Matlab而无需用户登录
- 轨道坐标系_天文坐标系分类
- 蓝色中国风传统图案背景素材
- UI设计灵感|移动应用的数据表盘都是怎么设计的?
- 编程师代码G都喜欢的|细致场景森系插画手机壁纸
- 火热抢购(双11)双12通用海报设计素材,PSD分层!