vue项目打包优化

一、打包路径和路由模式

第一步:在vue.config.js配置打包路径

复制代码
module.exports = {
	publicPath:'./'
}

第二步:在router/index.js将路由模式改为hash

复制代码
const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

如果项目上线要求是history模式,需要告诉后端重定向一下路径。

二、代理和环境变量

开发环境:.env.development

复制代码
VUE_APP_ENV = 'dev'

VUE_APP_BASE_API = 'http://localhost:3000'

生产环境:.env.production

复制代码
VUE_APP_ENV = 'pro'

VUE_APP_BASE_API = 'http://localhost:3000'

在.vue文件里可以使用 console.log(process.env.VUE_APP_BASE_API) 判断该环境是开发环境还是生产环境,从而选择接口地址url。

复制代码
	$axios( options ){

		let apiUrl = null;

		if( process.env.VUE_APP_ENV ==='dev' ){
			apiUrl = options.url;
		}else{
			apiUrl = process.env.VUE_APP_BASE_API + options.url;
		}
		return axios({
			url:apiUrl
		})
	}

三、使用node搭建后端项目

复制代码
全局命令:npm install express-generator -g

进入项目目录:express --view=ejs server

四、node-express跨域

复制代码
router.all('*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Access-Control-Allow-Methods', '*');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

五、安装可视化插件

复制代码
npm install webpack-bundle-analyzer

vue.config中配置

复制代码
        //引入可视化插件
		const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

		module.exports = {
			
			configureWebpack:config=>{
				config.plugins.push(
					new BundleAnalyzer()
				)
			}
		}

六、减少体积-productionSourceMap

别生成map文件

说明:map是方便代码运行的时候,可以准确输出代码到底是哪一行出现了错误。

复制代码
module.exports={
            
    //不生成map文件
    productionSourceMap:false
}

七、拆包--路由懒加载提升加载性能

说明:app.js是用来存放页面中的js操作的。例如:如果路由没有懒加载和分包,那么所有的路由全部会放在app.js文件中。

使用webpackChunkName在router/index.js文件在进行拆包

复制代码
 { 
    path: "/course",
    name: "Course",
    component: () => import(/* webpackChunkName:'course'*/ "../views/course/Course.vue")
},

八、减少体积-ui组件的按需引入

vendors.js:

说明:存放项目中的依赖。例如:vue.js、vue-router、vuex、axios、element-ui...

ui组件的按需引入:

根据不同的ui组件,使用按需引入,会让vendors.js文件的体积变小

九、减少体积-cdn引入包

可以把vue.js、router、vuex、axios...做成cdn引入。

注意:其实任何文件都可以做成cdn的形式,但是不建议ui组件做成cdn

相关推荐
Boilermaker19922 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子13 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102428 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y44 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构