vue-上线优化

最新推荐文章于 2022-08-27 15:06:09 发布
最新推荐文章于 2022-08-27 15:06:09 发布
阅读量331 收藏
点赞数
分类专栏： vue vue-上线优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/missKang/article/details/103895286
版权

生成打包报告

  1. 通过命令行参数的形式生成报告
    在终端执行命令：vue-cli-service build --report。会生成一个report.html文件的打包报告。
  2. 在终端执行命令：vue ui ，进入可视化ui面板，可以在其中的build模块查看打包报告。

修改webpack的默认配置

通过vue-cli创建的项目中，默认隐藏了webpack的配置。

  1. 通过创建vue.config.js修改webpack的默认配置。参考文档：https://cli.vuejs.org/zh/config/#vue-config-js

修改打包入口

***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            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')
        })
    }
}

加载外部CDN资源（externals）

默认情况下，通过impor语法导入的第三方依赖包，最终会被打包并合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

  1. 在vue.config.js文件中的发布模式配置externals节点
    如：
***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            config.entry('app').clear().add('./src/main-prod.js')
            config.set('externals',{**//externals需要用config.set来设置。**
				vue: 'Vue',**//健为要引入的包名，值为为其的重命名**
				vue-router: 'VueRouter',**//有短横线分隔的需要用引号包裹。**
				axios: 'axios',
				lodash: '_',
				echarts: 'echarts',
				nprogress: 'nprogress',
				'vue-quill-aditor': 'VueQuillEdutor'
			})
        })
        config.when(process.env.NODE_ENV === 'development', config =>{
        //开发阶段的打包入口
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}
  1. 把main-prod.js中的inport语句删掉。在index.html中通过link标签和script标签的方式把相应的css样式、js做全局导入。

通过CDN优化ElementUI的打包

发布阶段由于element-ui的组件包比较大，导致文件本身体积过大。也通过CDN的形式来加载。

  1. 在main-prod.js中，注释掉element-ui按需加载代码
  2. 在index.html中的头部通过link和script标签导入element-ui的js和css样式。

首页自定义配置

  1. 在vue.config.js文件中配置config.plugin来配置参数变量。如：
***//将main.js改成两个相同的main-dev.js,main-prod.js***
module.exports = {
    chainWebpack: config => {
        config.when(process.env.NODE_ENV === 'production', config =>{
        //发布阶段的打包入口,process.env.NODE_ENV可以拿到当前的模式。
            config.entry('app').clear().add('./src/main-prod.js')
            config.set('externals',{**//externals需要用config.set来设置。**
				vue: 'Vue',**//健为要引入的包名，值为为其的重命名**
				vue-router: 'VueRouter',**//有短横线分隔的需要用引号包裹。**
				axios: 'axios',
				lodash: '_',
				echarts: 'echarts',
				nprogress: 'nprogress',
				'vue-quill-aditor': 'VueQuillEdutor'
			})
			**config.plugin('html').tap(args => {
				args[0].isProd = true//isProd是自定义的变量名
				return args
			})**
        })
        config.when(process.env.NODE_ENV === 'development', config =>{
        //开发阶段的打包入口
            config.entry('app').clear().add('./src/main-dev.js')
            **config.plugin('html').tap(args => {
				args[0].isProd = false
				return args
			})**
        })
    }
}
  1. 在index.html的title标签中做一个三元运算用来判断是开发模式还是发布模式。如：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    **<title><%=htmlWebpackPlugin.options.isProd?'发布模式' : '开发模式' %></title>**
    //也可以用来控制按需加载的CDN（CDN是指通过link和script方式加载的资源）
    **<% if(htmlWebpackPlugin.options.isProd) { %>** //左大括号不能省
    //通过externals加载的外部CDN资源。
   <link rel="icon" href="<%= BASE_URL %>favicon.ico"> //发布模式需要加载的css样式
   <script src=""></script>//发布模式需要加载的js文件样式
  **<% } %>** //右大括号不能省，表示结束
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

路由懒加载

当项目过大时，路由文件会随之变大，为了避免文件过大，设置路由懒加载，通过分组的形式加载整组路由，而不是单独加载。

  1. 安装@babel/plugin-syntax-dynamic-import 包。在vue ui可视化中加载开发依赖中搜索
  2. 在babel.config.js配置文件中申明该插件。在plugins中申明插件
module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
    **'@babel/plugin-syntax-dynamic-import'//这里就是申明插件**
  ]
}
  1. 将路由改为按需加载的形式
import Vue from 'vue'
import VueRouter from 'vue-router'
//路由懒加载主要改变import载入的方式
//import Login qqq '../components/qqq.vue'
//import Login www '../components/www.vue'
//import Login eee '../components/eee.vue'
///第一组改编
const qqq = () => import(/* webpackChunkName: group-name1 */ '../components/qqq.vue')//group-name1为组名，同组路由会一同加载
const www = () => import(/* webpackChunkName: group-name1 */ '../components/www.vue')
const eee = () => import(/* webpackChunkName: group-name1 */ '../components/eee.vue')

//import Login aaa '../components/aaa.vue'
//import Login sss '../components/sss.vue'
//import Login ddd '../components/ddd.vue'
///第二组改编
const aaa = () => import(/* webpackChunkName: group-name2 */ '../components/aaa.vue')//group-name2为组名，同组路由会一同加载
const sss = () => import(/* webpackChunkName: group-name2 */ '../components/sss.vue')
const ddd = () => import(/* webpackChunkName: group-name2 */ '../components/ddd.vue')
//路由懒加载的分组设置
Vue.use(VueRouter)
export default new VueRouter({
  routes: [
  //第一组
    {path: '/qqq', component: qqq },
    {path: '/www', component: www },
    {path: '/eee', component: eee },
   //第二组
    {path: '/aaa', component: aaa },
    {path: '/sss', component: sss },
    {path: '/ddd', component: ddd }
  ]
})

项目上线

创建node服务器

创建node项目，安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹托管为静态资源即可。代码如下：

const express = require('express')
const app = express()//创建服务器
app.use(express.static('./dist'))//托管静态资源
app.listen(8000,()=>{//启动服务器
	console.log('服务器已启动')
})

开启gzip配置

使用gzip可以减少文件体积，使传输速度更快
可以通过服务器端使用express做gizp压缩。配置如下：

  1. 安装compression包，如：npm install compression -D
  2. 导包。如：const compression = require(‘compression’)；
  3. 启动中间件，如：app.use(compression()) //一定要卸载托管今天资源之前，不然不会生效。
    如：
const express = require('express')
const compression = require('compression')
const app = express()//创建服务器
app.use(compression())//必须放在托管静态资源之前。
app.use(express.static('./dist'))//托管静态资源
app.listen(8000,()=>{//启动服务器
	console.log('服务器已启动')
})

配置HTTPS服务

数据加密

  1. 申请SSL证书。（个人测试申请网站：https://freessl.org）
  2. 注册并下载ssl证书。（full_chain.pem公钥，private.key私钥）
  3. 在后台证书导入：
    如：
//在app.js中写的
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)//默认端口443

使用pm2管理应用

都是在终端上运行的
使node项目可以后台运行

  1. 在服务器中安装pm2：npm i pm2 -g
  2. 启动项目：pm2 start脚本 --name自定义名称
  3. 查看运行项目：pm2 ls
  4. 重启项目：pm2 restart 自定义名称
  5. 停止项目：pm2 stop 自定义名称
  6. 删除项目：pm2 delete 自定义名称
康寶寶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解webpack的配置文件entry与output
12-12
本文介绍了webpack的配置文件entry与output，分享给大家，具体如下： 在webpack.config.js中entry是唯一入口文件 entry也可以是一个数组 如果是一个数组，会将数组里面的文件一起打包到bundle.js entry也可以是一个对象。 如果output里filename有三个值： .[name]是文件名字是entry的键值。 .[hash]是md5加密的值。 .[chunkhash]这里是作为版本号使用。 每次修改文件，运行之后，都会生成不一样的hash 于chunkhash值，方便上线时静态资源的版本管理。 文件名如果每次运行都是变化的，文件引入的名
vue-cli创建的vue项目指定入口文件
weixin_43693458的博客
07-31 1692
主要使用process.env.NODE_ENV === ‘production’判断当前环境，再使用config.entry(‘app’).clear().add(’…’) 指定入口文件 module.exports = { chainWebpack: (config) => { config.resolve.alias //set第一个参数：设置的别名，第二个参数：设置的路径 .set('@', resolve('./src')) config.w.
vue-cli3 vue.config.js 配置entry 引入mock..js
yumihe
06-17 8437
使用场景：在开发环境，使用mock.js；在生产环境，不使用mock.js package.json配置： "scripts": { "serve": "cross-env NODE_ENV=development vue-cli-service serve", "build": "cross-env NODE_ENV=production vue-cli-service build", } vue.cofig.js configureWebpack: (config) => {
Webpack之入口起点(Entry Points)学习笔记（2）
我是希希呀的博客
09-26 556
单个入口（简写）语法用法：entry: string|Array<string>//webpack.config.js const config = { entry: './path/to/my/entry/file.js' };module.exports = config;entry 属性的单个入口语法，是下面的简写：const config = { entry: { main:
【VUE项目实战】63、指定打包入口及加载外部CDN资源
程序猿之洞
08-27 1666
上一篇我们制定了项目的优化以及上线工作目标，本节我们来为开发模式与发布模式制定不同的打包入口，然后为项目加载外部CDN资源
详解使用vue-admin-template的优化历程
12-03
但是，开始用的时候，作者并没有对此进行优化，到项目上线的时候，才发现，打包出来的文件都十分之大，就一个 vendor 就有 770k 的体积（下图是基础模板，什么都没加打包后的文件信息）： 通过 webpack-bundle-...
vue项目打包优化及上线
05-10
vue项目打包优化及上线
vue-meituan：基于Vue全家桶（2.x）制作的美团外卖APP
02-04
:open_book:技术栈【前端】 Vue ：构建用户界面的MVVM框架，核心是响应的数据绑定和组系统件vue-router ：为单页面应用提供的路由系统，项目上线前使用了路由懒加载技术，来逐步加载路由优化性能vuex ：Vue集中状态...
07-Vue全家桶-项目上线1
08-03
1. 项目优化 1. 生成打包报告 2. 第三方库启用 CDN 4. 路由懒加载 5. 首页内容定制 1. 项目优化 1. 生成打包报告 1. 项目优化 1.
vue 优化CDN加速的方法示例
01-19
代码敲完，项目上线，然后就要与优化相遇。 项目有抢购的性质content download 时间非常的长加载慢的很，至此开始前端优化之旅 项目根目录运行 npm install webpack-bundle-analyzer --save-dev 在build/webpack...
webpack.config.js webpack配置 之 entry、output
Luckyzhoufangbing的博客
05-30 689
webpack打包后的文件默认存在 dist文件夹下的main.js里 这个可以自己设置～ webpack.config.js const path = require('path') module.exports = { // 入口文件 ---> 把哪个js文件进行打包 entry: './js/index.js', // 出口 filename为输出文件名， path...
VUE后端管理插件安装
m0_64802729的博客
03-07 567
1.下载node.js 1).官网下载 如果是window7系统: 下载安装13的版本 URL: https://nodejs.org/dist/latest-v13.x/ 2).安装node.js 之后一路下一步安装即可. 3).检查node js版本 4).检查NPM版本号 5).切换淘宝NPM库 1).npm install -g cnpm --registry=https://registry.npm.taobao.org 方式2: 2).npm config set registry htt
vue-cli3项目设置开发环境和生产环境的不同入口
weixin_43837268的博客
07-13 936
1.创建vue.config.js 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.N
开始一个React项目(二) 彻底弄懂webpack-dev-server的热更新
热门推荐
dengdengda的博客
12-07 1万+
前言webpack-dev-server配置热更新看起来很简单，但是实际上是有很多坑的，目前为止我没有搜到一篇深入讲解这个的，如果你觉得它很简单，那么或许等你看完这篇文章你会有不一样的看法。 由于HMR非常强大，本来这篇文章我是准备总结webpack-dev-server的，最后基本只总结了它的两个参数：inline和hot，其它的配置我会另外再写一篇文章讲解。模块热替换(Hot Module R
webpack.config.js====entry入口文件的配置
weixin_34112030的博客
01-20 730
1. 一般是采用对象语法： entry: { index: './src/default/js/index.js' }, https://webpack.css88.com/concepts/entry-points.html 转载于:https://www.cnblogs.com/songxia/p/10295706.html...
Spark ConfigEntry
houzhizhen的专栏
04-24 542
Object ConfigEntry contains all registed entry. private[spark] object ConfigEntry { private val knownConfigs = new java.util.concurrent.ConcurrentHashMap[String, ConfigEntry[_]]() def registerEntry(e
Letsencrypt更新证书renew时出现错误produced an unexpected error: Missing command line flag or config entry
蜗牛的专栏
05-22 2889
一直使用的Letsencrypt的HTTPS证书，之前都正常自动更新，今天突然收到邮件提示域名证书快过期了，于是手动执行renew结果失败，出现一堆错误信息： Attempting to renew cert (xxx.me) from /etc/letsencrypt/renewal/xxx.me.conf produced an unexpected error: Missing comman...
Vue项目优化上线
weixin_44748589的博客
06-20 88
nprogress插件使用方法：1. 在vue可视化面板中点击依赖->下载依赖->运行依赖->搜索nprogress并下载2. 在main.js中引入nprogress插件 3. 使用nprogress 开发时使用的console.log() 编译时不再打印：使用插件babel-plugin-transform-remove-console1.在vue可视化面板中点击依赖->下载依赖->开发依赖->搜索babel-plugin-transform-remove-console并下载2. babel.
vue项目上线怎么维护
最新发布
04-19
4. 定期对项目进行优化和升级，更新依赖项，以保持项目的性能和流畅度。 总之，Vue项目的维护需要耗费大量时间和精力，并且需要人员具备相关的技能和知识。因此，您可能需要考虑雇用专业的开发人员或团队，以确保...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值