vue加载优化策略有哪些

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

1

Vue.prototype.$Notice = Notice;

　　这样我们就可以正常的使用iview的组件了。

方法三、使用CDN加速策略

　　在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。外部的库文件，就可以使用CDN资源。vue cli3.x在配置cdn是和vue cli2.x有一些区别，vue cli在升级后，代码结构变化比较大，配置文件集成到了vue.config.js文件中。下面以amap、axios和qs为例讲述如何使用cdn加载资源。

1.在index.html中引入相关cdn资源

99ebd1b30263a9e9dbda3187e8c65e7.png

2.配置externals

　　vue cli3.x 配置webpack是在vue.config.js的configureWebpack中

c51b8ed3a5fd5e19fa0681dfd8c572f.png

　　配置完之后，我们就可以正常使用全局的Amap、axios和Qs了

方法四、使用compression-webpack-plugin将文件打包成gzip格式

　　compression-webpack-plugin这个依赖在npm run build是会生成.gz文件。之后项目访问的文件就是这个.gz文件，正常的项目打包体积会减少一半还要多，是不是很吊

7abb187984f1e8f6623f8602157df8f.png

　　下面我们来进一步讲述这个这个依赖的使用流程。

1.npm 引入

1

npm install compression-webpack-plugin  --save-dev

2.vue cli3.x在 vue.config.js配置webpack

fa8c4958eff8755d55cca10c6cbb93f.png

3.nginx开启gzip模式

　　在上一步前端就已经配置好了，之后就是nginx配合开启gzip模式，这个比较简单，只要你对nginx有一点了解，我们在nginx.conf中的http中配置一些代码

171ebed87aecc07e708f5e13f5f3191.png

4.验证是否配置成功

　　这步就很简单了只需要查看chunk类文件的Response Headers的Content-Encoding是否是gzip即可

8e3d98090745d4fec8b46a8751b8033.png

相关免费学习推荐：JavaScript（视频）

以上就是vue加载优化策略有哪些的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

vue加载优化策略有哪些

更多相关阅读请进入《加载优化》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...