项目优化

1.生成打包报告

  • 第一种方法:命令行【不推荐】
    vue-cli-service bulid --report
  • 第二种方式:vue的可视化UI面板直接查看【控制台输入 vue ui】
  • 在这里插入图片描述
    在ui面板中查看打包的项目,并且进行优化
    在这里插入图片描述
    在这里插入图片描述

2.通过vue.config.js修改webpack的默认配置

  • 通过vue-cli 3.0工具生成的项目,默认是隐藏了webpack配置项的,目的是为了让工作中心放在业务逻辑上面
  • 然后配置webpack

3.为开发模式与发布模式指定不同的打包入口

  • 通常情况下,Vue项目的开发模式和发布模式,共同用一个打包入口文件(src/main.js)。为了将项目的开发过程和发布过程分离,我们可以采取两种模式,各自指定打包入口的文件:
  1. 开发模式的入口文件为:src/main-dev.js
  2. 发布模式的入口文件为: sec/main-prod.js

4.configureWebpack和chainWebpack

  • 在vue.config.js导出的配置对象中,新增configureWebpack或chainWebpack节点,来自定义webpack的导包设置
  • 在这里,configureWebpack和chainWebpack的作用是相同的,唯一的区别就是他们修改webpack配置的方式不同:
  1. configureWebpack通过的操作对象的形式,来修改默认的webpack的配置
  2. chainWebpack通过链式编程的形式,来修改默认的webpack配置

5.通过chainWebpack自定义打包入口

module.exports={
		chainWebpack: config=>{
	        //开发模式的入口为main-prod
			config.when(process.env.NODE_ENV === 'production', config=>{
				config.entry('app').clear().add('./src/main-prod.js')
			})
	        //发布模式的入口为main-dev
			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中的第三方依赖包,都不会被打包
  • 通过external加载外部的CDN资源【目的减小打包体积】
config.set('externals',{
	vue:'Vue',
	'vue-router':'VueRouter',
	axios:'axios',
	lodash:'_',
	echarts:'echarts',
	nprogress:'NProgress',
	'vue-quill-editor':'VueQuillEditor'
	
})
  • 在index.html的文件的头部,添加资源引用【删除对应的引入的样式】
<!-- nprogress 的样式表文件 --> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    <!-- 富文本编辑器 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
    <!-- element-ui 的样式表文件 --> 
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" />
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.5.4/theme-chalk/index.css" /> -->

    <!-- <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> -->
    <script src="https://cdn.staticfile.org/vue/2.6.3/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>
    <!-- element-ui 的 js 文件【并且注释带引入elementui的import】 -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.1/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

7.路由懒加载

项目上线相关配置

1.通过node创建web服务器【不一定非要node】

  • 创建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 localhost:80')
})

2.开启gzip配置

  • 使用gzip可以减小文件的体积,使得传输速度更快
  • 可以通过服务端使用express做gzip压缩
 //安装相应包
 npm i compression
 //导入包
 const compression = require('compression')
 //启用中间件【一定要在托管静态资源之前】
 app.use(compression())

3.配置https服务【前端了解:http是明文的,传输密码这些的话不安全】

  • 申请SSL证书
  1. 在https://freessl.cn/官网(免费),输入要申请的域名并且选择品牌
  2. 输入自己的邮箱,并且选择相关选项
  3. 验证DNS(在域名原理后台添加TXT记录)
  4. 验证通过后,下载SSL证书(full_chain.pem公钥;private.key私钥)

4.使用pm2管理应用【了解】

  • 当我们用node创建的服务器,关闭命令窗口时,服务器也随之关闭,pm2就是解决这个的
Logo

前往低代码交流专区

更多推荐