CSDN|VUE 项目如何快速优化？| 原力计划( 二 )

通过设置externals这个节点，指定哪些包直接去window上去查找使用，而不会将这些指定的包再次打包起来，这样就可以减小最终生成的js的文件体积。
去除main.js中引入的第三方包的样式表：

本文插图
将这些样式表也统统的从main.js文件中去除，统一由CDN进行引入。
在public/index.html中添加 css和js的CDN地址：
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="http://news.hoteastday.com/a/favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title>  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" /> <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.1.6/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.15/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script> </head> <body> <noscript> <strong>We're sorry but <%= %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body></html>我们通过CDN去引用css样式的话，我们项目生成的包中就不会存在这些css文件，可以减小项目的体积，并且，我们还将指定的js文件也通过CDN的方式来引用，这样这些js就会注册到windows全局中，这样就对应到了vue.config.js配置externals节点的内容了。
引入CDN效果对比：
未使用CDN：

本文插图
使用CDN后：

本文插图
甲方爸爸打人的力度轻了许多。
路由懒加载
当项目打包构建的时候， js包会变得非常巨大，影响页面加载，如果我们能够把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。

CSDN|VUE 项目如何快速优化？| 原力计划( 二 )

推荐阅读

手术|女主播花2万多做隆鼻修复术，整完鼻子变4个洞……

热血传奇：热血传奇：小虾米在当初竟遭到全服玩家追杀，他当初到底做了什么

北京天安门广场|游客为雨中哨兵撑伞，让人泪目的一刻发生了

郭施亮|外资大举买入，A股步入加速上涨行情了吗？，两天大涨超百点

教育部|教育部规范大学命名，宁波大学、厦门大学、复旦大学简称要说好

|椰树招聘，网友破口大骂：卖身契都出来了，不是你疯就是我疯

单反相机拍绿植花卉技巧单反拍花草用什么镜头

#司机师傅#避免司机买车被“坑”滴滴暂停新司机注册审核7天

#吴昕祝福潘玮柏#吴昕祝福潘玮柏结婚真好好友周杰伦为好兄弟留言

怎样写爱心捐款倡议书?爱心捐助倡议书咋写

世界上最大的大熊猫保护区是什么国家

虎扑足球|拜仁全队总身价是莫斯科火车头10倍，对比悬殊

沙棘油排毒

咳嗽总不好怎么办咳嗽怎么治最有效？

[长安汽车]本田享域：终于靠价格扳回一局，车长近4.8米轴距2730mm，跌破8万

老鹰航空|俄罗斯远程客机技术在曲折中成熟，却输掉市场，从图-114到伊尔96

味谷的厨房原创夏天吃烤生蚝，料汁是关键，多数人做错，跟着做新手秒变大厨

大宇茶馆|为何却被称为三国战力天花板？，死于吕布之手的都是小虾小鱼

北京日报客户端世卫组织：中国以外确诊病例突破401万例

4am战队|PCL：虎牙双雄相继崛起，4AM更是完成一个纪录，网友直呼不可思议