vue-cli4打包最强优化（10M变300kb）
项⽬开始时webpack配置
vue-cli3以后，我们修改webpack配置，需要⾃⼰在项⽬根路径下创建fig.js⽂件。
⼀、配置 proxy 跨域
使⽤vue-cli发开项⽬，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的⽅式，解决跨域问题：
devServer:{
open:false,// ⾃动启动浏览器
host:'0.0.0.0',// localhost
port:6060,// 端⼝号
hotOnly:false,// 热更新
紫砂门户网站模板overlay:{
// 当出现编译器错误或警告时，在浏览器中显⽰全屏覆盖层
warnings:false,
errors:true
},
proxy:{
//配置跨域
'/api':{
target:'st',// 接⼝的域名
// ws: true, // 是否启⽤websockets
changOrigin:true,// 开启代理，在本地创建⼀个虚拟服务端
pathRewrite:{
'^/api':'/'
}
}
}
}
}
this.axios({
url:'/api/v1/api/userinfo',
method:'get'
}).then(res=>{
/
/......
})
⼆、配置 alias 别名
使⽤vue-cli开发项⽬，最⼤特⾊是组件化。组件中频繁引⽤其他组件或插件。我们可以把⼀些常⽤的路径定义成简短的名字。⽅便开发中使⽤。
const path =require('path')
//定义resolve⽅法，把相对路径转换成绝对路径
const resolve= dir => path.join(__dirname, dir)
chainWebpack: config =>{
// 添加别名
.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'
项⽬结束后打包前webpack配置
⽬的：
提⾼打包速度
减⼩项⽬体积、提⾼⾸屏加载速度
提⾼⽤户体验（⾻架屏）
打包前必做
项⽬开发完成后，运⾏npm run build进⾏打包操作。打包前对webpack配置。
publicPath:'./',// 静态资源路径（默认/，打包后会⽩屏）
outputDir:'dist',// 打包后⽂件的⽬录（默认为dist）
assetsDir:'static',// outputDir的静态资源(js、css、img、fonts)⽬录默认为‘’没有单独⽬录js/css/img在根⽬录中。
}
⼀、去除⽣产环境sourceMap
问题： vue项⽬打包之后js⽂件夹中，会⾃动⽣成⼀些map⽂件，占⽤相当⼀部分空间
sourceMap资源映射⽂件，存的是打包前后的代码位置，⽅便开发使⽤，这个占⽤相当⼀部分空间。
map⽂件的作⽤在于：项⽬打包后，代码都是经过压缩加密的，如果运⾏时报错，输出的错误信息⽆法准确得知是哪⾥的代码报错，有了map就可以像未加密的代码⼀样，准确的输出是哪⼀⾏哪⼀列有错。如何编程我的世界游戏
⽣产环境是不需要sourceMap的，如下配置可以去除
/
/去除⽣产环境的productionSourceMap
productionSourceMap:false,
}
去除sourceMap前后对⽐，减少了很⼤体积。
前：dist⼤⼩为7M
后：dist⼤⼩为3M
⼆、去除console.log打印以及注释
下载插件
jquery下载文件请求cnpm install uglifyjs-webpack-plugin --save-dev
const UglifyJsPlugin =require('uglifyjs-webpack-plugin')
const isProduction = v.NODE_ENV==='production';
configureWebpack: config =>{
const plugins =[];
if(isProduction){
plugins.push(
new UglifyJsPlugin({
uglifyOptions:{
output:{
comments:false,// 去掉注释
},
warnings:false,textbox翻译
compress:{
drop_console:true,
drop_debugger:false,
pure_funcs:['console.log']//移除console
}
}
})
)
}
},
结论：重新打包，dist体积减少并不⼤。因为congsole.log()以及注释并不会占⽤太多体积（也就10-30kb）
三、使⽤CDN 加速优化
cdn优化是指把第三⽅库⽐如（vue，vue-router，axios）通过cdn的⽅式引⼊项⽬中，这样vendor.js会显著减少，并且⼤⼤提升项⽬的⾸页加载速度，下⾯是具体操作：
const isProduction = v.NODE_ENV==='production';
// externals
const externals ={
vue:'Vue',
'vue-router':'VueRouter',
vuex:'Vuex',
vant:'vant',
axios:'axios'
}
// CDN外链，会插⼊到index.html中
const cdn ={
/
/ 开发环境
dev:{
css:[],
js:[]
},
// ⽣产环境
build:{
css:['cdn.jsdelivr/npm/vant@2.12/lib/index.css'],
js:[
'cdn.jsdelivr/npm/vue@2.6.11/dist/vue.min.js',
'cdn.jsdelivr/npm/vue-router@3.1.5/dist/vue-router.min.js', 'cdn.jsdelivr/npm/axios@0.19.2/dist/axios.min.js',
'cdn.jsdelivr/npm/vuex@3.1.2/dist/vuex.min.js',
'cdn.jsdelivr/npm/vant@2.12/lib/vant.min.js'
]
}
}
configureWebpack: config =>{
// 为⽣产环境修改配置...
if(isProduction){
// externals
}
},
chainWebpack: config =>{
/**
* 添加CDN参数到htmlWebpackPlugin配置中
*/
config.plugin('html').tap(args =>{网页素材处理
if(isProduction){
args[0].cdn = cdn.build
}else{
args[0].cdn = cdn.dev
}
return args
})
}
}
xml打开在 public/index.html 中添加
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论