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

相关推荐
木木黄木木2 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning212 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一3 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla3 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡3 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu3 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c3 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪4 小时前
几种比较实用的指令举例
前端·javascript·面试
麻芝汤圆4 小时前
MapReduce 的广泛应用:从数据处理到智能决策
java·开发语言·前端·hadoop·后端·servlet·mapreduce
与妖为邻4 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html