声明：本文转载自https://my.oschina.net/sunshineS/blog/1583563，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
vue是一个单例页面，所有页面都是由js动态渲染，因此js的体积会越来越大，从而影像页面的渲染性能
官方推出了异步组件路由，是一个解决js打包后体积过大问题的方案，可以很好的吧vue组件按组区分，从而打出不同的js文件，解决了单一js打包大的问题。
以下是一个异步组件打包的最终文件
后面的数字为hash值，为了js不会缓冲
app为vue以及vue-router等第三方库的额外配置代码
vendor为第三方库插件的本身代码
mainfest为第三方库runtime代码
数组部分就是不同分组的异步打包文件（几个组就有几个js文件）
注意：千万不要把js的组件分的颗粒度很小，js文件多了也会影响效率，浏览器加载js的线程一般为4-5个
第三方库文件可以使用第三方的cdn，从而减少了vendor的体积大小。
webpack的打包忽略第三方库的配置 （webpack.base.conf.js）
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex':'Vuex', 'axios': 'axios', 'element-ui':'ELEMENT', }要是内网环境下，你又懒得搭建cdn，就把相应的库文件下载到本地来使用，像往常一样引入html里就可以
<body> <div id="app"> <!--vue-ssr-outlet--> </div> <script src="/static/cdn/vue/2.5.2/vue.min.js" charset="utf-8"></script> <script src="/static/cdn/vuex/2.4.1/vuex.min.js" charset="utf-8"></script> <script src="/static/cdn/vue-router/3.0.1/vue-router.min.js" charset="utf-8"></script> <script src="/static/cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script> <script src="/static/cdn/element-ui/2.0.5/index.js" charset="utf-8"></script> </body>实验证明方法可以减少60%的体积文件，渲染速度大大提升
ssr就是把前端的渲染改成又后台直接渲染，将渲染好的页面直接呈现给客户，此方法可用于网站的百度推广和seo优化有重大的意义。
常用的后台渲染框架有nuxtjs
一个项目中的不同模块拆分出来，都可以独立成vue项目，采用iframe标签进行跳转，验证方面你可以制作一个公用的js验证库与服务端进行交互。（有个类似于后台微服务的体系）
此方法还在实验阶段，只是个人的想法
以上就是最近vue项目的上线后打包优化遇到的问题。
本文发表于2017年12月02日 08:33
(c)注：本文转载自https://my.oschina.net/sunshineS/blog/1583563，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 3468 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |