压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
问题
由于这次项目是在初学Vue之后的第一个正式项目，没有考虑到类似路由懒加载、按需加载的问题，所以呢，也算是没经验。
到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。
优化前：
app.js2.3MB vendor.js2.4MB vendor.css612kB app.js.map9.13MB vendor.js.map16.21MB //不一一列举....
优化
接下来看看优化方法。
优化步骤1：不生成.map文件
在webpack.prod.cong.js文件下，修改配置项sourceMap设置为false或者删除：
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
},
//sourceMap:true//将sourceMap关闭就不会打包出.map文件
}),
这样的话，开发环境就不会生成.map文件。
优化步骤2：按需加载
对于项目中，一些通用或者不是特别差异的组件可以使用按需加载，在需要的时候加载即可，并且会自动缓存。
这时候需要在router文件夹下的index.js文件修改路由配置中的组件引入方式：
Vue.use(Router)
exportdefaultnewRouter({
routes:[{
path:"/",
component:function(resolve){
require(["./../components/Index"],resolve)
}
}]
})
这样的话，这个组件就会在你需要加载的时候才会加载。
优化步骤3：VueRouter的懒加载
官方文档
在vue-router的模块引入，将默认的import..from..引入方式，修改为一步。如下：
constFoo=()=>import("/Foo.vue)
```
然后在`配置路由`中，和之前一样使用：
Vue.use(Router)
exportdefaultnewRouter({
routes:[{
path:”/“,
component:Foo
}]
})
优化步骤4：将大的第三方包通过`标签来引入的话，会很大程度缩小打包的大小。
但是需要在`vue`配置文件这样配置：
`webpack.base.config.js`中添加`不打包`的包的名称，这样打包的时候才不会把这些包一起打包进去：
module.exports={
entry:{...},
output:{...},
resolve:{...},
module:{...},
externals:{
"echarts":"echarts"//不打包的包名
}
}
然后在index.html中用标签引入依赖包的CDN或者其他地址。
优化步骤5：图片压缩
这个不用怎么说，有个地址很好用，推荐下：tinypng
优化后
通过这几步骤，优化完成的每个文件都会缩小好多倍：
app.js136.2kB vendor.js213.2kB vendor.css612kB//css这个我还没办法 app.js.map0MB vendor.js.map0MB
更多关于VUE压缩的方案大家可以看看下面的相关文章
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。