压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
问题
由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。
到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。
优化前：
app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列举....
优化
接下来看看优化方法。
优化步骤1： 不生成.map文件
在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
// sourceMap: true //将sourceMap关闭就不会打包出.map文件
}),
这样的话，开发环境就不会生成 .map 文件。
优化步骤2： 按需加载
对于项目中，一些 通用 或者 不是特别差异 的组件可以使用按需加载，在需要的时候加载即可，并且会自动缓存。
这时候需要在 router 文件夹下的 index.js 文件修改路由配置中的 组件引入 方式：
Vue.use(Router)
export default new Router({
routes:[{
path:"/",
component:function(resolve){
require(["./../components/Index"],resolve)
}
}]
})
这样的话，这个组件就会在你需要加载的时候才会加载。
优化步骤3： VueRouter的懒加载
在 vue-router 的模块引入，将默认的 import .. from .. 引入方式，修改为一步。如下：
const Foo = () => import("/Foo.vue)
```
然后在 `配置路由` 中，和之前一样使用：
Vue.use(Router)
export default new Router({
routes:[{
path:”/“,
component:Foo
}]
})
优化步骤4：将大的第三方包通过<script>标签引入
一般将类似 `echarts` 这种比较大的第三方依赖包，通过 `<script></script>` 标签来引入的话，会很大程度缩小打包的大小。
但是需要在 `vue` 配置文件这样配置：
`webpack.base.config.js` 中添加 `不打包` 的包的名称，这样打包的时候才不会把这些包一起打包进去：
module.exports = {
entry:{...},
output:{...},
resolve:{...},
module:{...},
externals:{
"echarts":"echarts" //不打包的包名
}
}
然后在 index.html 中用 <script></script> 标签引入依赖包的CDN或者其他地址。
优化步骤5： 图片压缩
这个不用怎么说，有个地址很好用，推荐下：tinypng
优化后
通过这几步骤，优化完成的每个文件都会缩小好多倍：
app.js 136.2kB vendor.js 213.2kB vendor.css 612kB //css 这个我还没办法 app.js.map 0MB vendor.js.map 0MB
更多关于VUE压缩的方案大家可以看看下面的相关文章
相关文章
这篇文章主要介绍了Vue Ajax跨域请求实例详解,需要的朋友可以参考下2017-06-06
Vue中"This dependency was not found"问题的解决方法
这篇文章主要介绍了Vue中"This dependency was not found"的问题的解决方法,需要的朋友可以参考下2018-06-06
ant design vue datepicker日期选择器中文化操作
这篇文章主要介绍了ant design vue datepicker日期选择器中文化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
mpvue中配置vuex并持久化到本地Storage图文教程解析
这篇文章主要介绍了mpvue中配置vuex并持久化到本地Storage的教程详解,# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。本文分步骤给大家介绍的非常详细，需要的朋友参考下吧2018-03-03
这篇文章主要介绍了如何处理elementUI中表格多选框禁用的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue项目打包后部署到服务器,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
本篇文章主要介绍了深入理解Vue官方文档梳理之全局API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要给大家介绍了关于vue如何调用摄像头实现拍照上传图片、本地上传图片的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga，下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容，具有一定的参考价值，需要的小伙伴可恶意参考一下2021-12-12
这篇文章主要为大家介绍了vue LogicFlow更多配置选项详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论