vue-cli4打包最强优化 极大地减少内存 简单易懂
-
打包:可以把sass编译成css,
-
webpack前端化工程的开发工具,把各个模块拼接在一起
-
webpack的特点:乜有可以直接修改webpack的配置文件
-
这时需要我们创建vue.config.js文件来修改webpack的配置
-
打包前默认是在根目录下寻找,
publicPath
打包后的静态资源(img,就是,css)是当前路径 -
1.配置跨域
-
我们现在 常用的就是 vue-cli4(脚手架)
-
脚手架版本与vue版本不一样
devServer: {
proxy: {
//配置跨域
'/api': {
target: 'http://120.53.31.103:84/api', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}
- 2.配置别名 alias
使用vue-cli开发项目,最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用
//加载path模块
const path = require('path')
//定义resolve方法,把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainWebpack: config => {
// 添加别名
config.resolve.alias
.set('@', resolve('src'))
.set('assets', resolve('src/assets'))
.set('api', resolve('src/api'))
.set('views', resolve('src/views'))
.set('components', resolve('src/components'))
}
}
- 配置完成后我们可以在组件中的路径
/之前这么写
import Home from '../views/Home.vue'
//配置alias别名后
import Home from 'views/Home.vue'
//也可以这么写
import Home from '@/views/Home.vue'
一、去除生产环境sourceMap
问题: vue项目打包之后js文件夹中,会自动生成一些map文件,占用相当一部分空间
sourceMap资源映射文件,存的是打包前后的代码位置,方便开发使用,这个占用相当一部分空间。
map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错,有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。
我们第一次打包的时候在4或5M,普通的包稍微大一点的仙姑10-25M
- 性能优化上:
去除sourceMap前后对比,减少了很大体积。
- 打包完成后的包会减少三分之二
还在更新…