vue项⽬webpack打包优化实践总结
最近在头疼vue项⽬打包的问题，看着⾟⾟苦苦写的项⽬写完后，打包到线上的⽤户体验很糟糕，实在是⽆地⾃容。后⾯接触了⼀些打包优化的⽅法，现在做⼀个开发总结，这个技术栈就是vue+element-ui+axios+echarts，使⽤webpack打包构建⼯具，算是⼀个经验笔记只谈，⽂章若有不⾜之处，还请各位⼤侠指点⼀⼆，我会尽快改正，谢谢!
⽬录
路由异步加载
element组件优化
webpack配置优化
项⽬依赖包统计分析
优化效果
路由异步加载
Vue项⽬的页⾯是使⽤的虚拟路由，页⾯内容是靠vue-router配置的路由链接来访问的，SPA单页⾯应⽤开发，适合开发后台系统，但是对搜索引擎不友好，因为最后只⽣成⼀个页⾯。
搜索引擎是靠页⾯的链接来爬取⽹页内容，然后搜录进去搜索引擎数据库的，⽽vue打包以后的项⽬只有⼀个页⾯，所以其中的内容搜索引擎蜘蛛当然⽆法收录，这是⼀个⽐较不好的地⽅，当然后期可以进⾏SEO优化。
所以当你的项⽬vue组件很多时候，打包以后的⾸屏渲染优化就是⼀个⾮常重要的问题，改善性能，提⾼加载打开速度，是很关键的⼀点。
下⾯，我就vue中的路由异步懒加载做⼀个⽅法分享，建议如果组件不是很多的项⽬不要使⽤这种⽅法，会增加加载时间和速度，对于组件很多的项⽬可以采⽤这种⽅法。
默认es6引⼊
但是这种⽅法组件多了，加载就会变慢，打包以后的app.js⽂件体积会变得⾮常⼤，后⾯使⽤⽐较常⽤的两种。
import example from'../components/example.vue'
vue官⽅推荐
使⽤import把组件分割成⼀个个⼩的单独的⽂件，缩⼩⽂件体积。webpackChunkName⾥⾯的就是这个组件/⼦组件的打包后的名字。const example=()=>import(/* webpackChunkName: "group-example" */'../components/example.vue')
require⽅法
下⾯就是我⽐较喜欢的require⽅法，这个也是可以把组件分割成⼩的块。
const example= resolve =>require(['../components/example.vue'], resolve);
element组件优化
由于是后台项⽬，所以选择element-ui框架进⾏后台系统搭建，所以对这个进⾏优化也可以减⼩体积，提⾼速度和减少加载时间，提⾼⽤户体验。
对这个框架的优化可以使⽤第三种⽅法，但是我还是⽐较喜欢这种⽅法，就是对组件不⽤全局引⼊，还是改成按需加载的⽐较好。
全局使⽤
全局引⼊和使⽤
import elementUI from'element-ui'
Vue.use(elementUI)
这种⽅法对于只⽤少量element-ui组件的情况来说，很多组件都是多余的，会⽆形中加⼤加载时间和项⽬打包后的体积，所以使⽤下⾯这种按需引⼊的⽅法可以有效解决这个问题。
下⾯是演⽰代码：⼀般是表单和表格⽤的较多。
按需引⼊
// 按需引⼊
import{
Form,
Button,
Table,
}from'element-ui'
// 按需使⽤
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)
还要⼀些加载和消息提⽰等的组件，以下写法：
// 按需引⼊
import{
Loading,
Message,
MessageBox,
Notification,
}from'element-ui'
// 按需使⽤
Vue.use(Loading.directive)
// 挂载到vue实例上⾯
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = firm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,
使⽤通知组件可以，这么调⽤也可以，Notification(options)，或者Notification.success(options)。
webpack配置优化
依赖包体积优化
众所周知，⽇常开发过程中，前端这块早就已经开始进⾏⼯程化和组件化开发了，所以免不了下载各种node包，使得打包后的体积也是⾮常的庞⼤，下⾯使⽤webpack的⼀个配置外部扩展就可以解决这类问题。
externals配置练习
webpack官⽅⽂档是有⼀个配置⽤来处理各种依赖包打包优化的，这是。
使⽤⽅法：这个案例以jQuery为主。
webpack打包流程 面试引⼊cdn，在index.html的head标签中写⼊。
<script
src="code.jquery/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
修改webpack配置⽂件fig.js
属性就是你在项⽬中引⼊的名称，后⾯的值就是jQuery的暴露出的⽅法名称。
externals:{
jquery:'jQuery'
}
最后使⽤
import $ from'jquery';
$('.my-elem').animate(/*some things*/);
这样三步以后，打包后的⽂件体积会缩⼩很多，⼀个不是很明显，但是很多个包使⽤这种⽅法，效果就⽐较显著了。externals配置实战
在index.html中引⼊cdn，以下是⼏个常见的cdn服务商。
这⾥使⽤国内的bootcdn服务，版本的话你⾃⼰项⽬使⽤的哪个就引⼊哪个。
<script src="cdn.bootcss/vue/2.6.10/vue.min.js"></script>
<script src="cdn.bootcss/vue-router/3.0.7/vue-router.min.js"></script>
<script src="cdn.bootcss/vuex/3.1.1/vuex.min.js"></script>
<script src="cdn.bootcss/axios/0.19.0/axios.min.js"></script>
<script src="cdn.bootcss/element-ui/2.10.1/index.js"></script>
在webpack配置⽂件f.js中entry属性后⾯加下⾯⼀段：
同样的，属性是包暴露出的⽅法名称，后⾯的值是你在项⽬中使⽤的名称。
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex',
'element-ui':'elementUI',
'axios':'axios',
}
实战过后，发现上⾯的配置⽅法有写问题，所以调换了个，就⼀切?了。
Gzip压缩和sourceMap优化
这个也是压缩⽂件的⼀个⽅法，线上服务器的nginx也开启gzip功能更好；取消资源地图，可以有效保护源码。
在webpack的build⽂件中，开启Gzip压缩功能和禁⽤资源地图。
// ...
build:{
productionSourceMap:false,
productionGzip:true,
}
}
这样做的话，打包以后就不会再有sourceMap⽂件了，也会多了⼏个以.js.gz后缀名的⽂件。
项⽬依赖包统计分析
最后，介绍⼀点⽇常开发过程中⽤到的依赖包分析包，开启以后可以可视化的观察每个包的体积，帮助你整理分析每个包的结构。webpack配置
下载依赖包
npm i -D webpack-bundle-size-analyzer
引⼊配置
引⼊⽅法两种
// commondjs⽅法
var WebpackBundleSizeAnalyzerPlugin =require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
// es6⽅法
import{ WebpackBundleSizeAnalyzerPlugin }from'webpack-bundle-size-analyzer';
在webpack的配置⽂件中插件部分加⼊：
// ...
plugins:[
new WebpackBundleSizeAnalyzerPlugin('./')
]
// ...
}
使⽤上⾯配置会⽣成以下内容：
<webpack-output-path>/：
marked: 27.53 KB (14.9%)
lru-cache: 6.29 KB (3.40%)
style-loader: 717 B (0.379%)
<self>: 150.33 KB (81.3%)
vue-cli脚⼿架配置
优化效果
最后看⼀下优化后的效果：
打包时间对⽐
打包前：
打包后：
打包体积对⽐
打包前：
打包后：
⽹页打开速度对⽐打包前：
打包后：
依赖包分析图
打包前：
打包后：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。