Vue怎么使用CDN优化首屏加载速度的速度

来源：蜘蛛抓取(WebSpider) 时间：2018-06-09 22:43 标签： react首屏加载优化
vue——项目优化，缩短首屏加载时间
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
外部的库文件，可以使用CDN资源，或者别的服务器资源等。
下面来介绍几种方式：
1.大文件定位
我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。
npm install --save-dev webpack-bundle-analyzer
在webpack中设置如下，然后npm run dev的时候会默认在浏览器上打开
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerP
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
2.JS文件按需加载
如果没有这个设置，项目首屏加载时会加载整个网站所有的JS文件，所以将JS文件拆开，点击某个页面时再加载该页面的JS是一个很好的优化方法。
这里用到的就是vue的组件懒加载。在router.js中，不要使用import的方法引入组件，使用require.ensure。
import index from '@/components/index'
const index = r =& require.ensure([],() =& r(require('@/components/index'),'index'))
// 如果写了第二个参数，就打包到该`JS/index`的文件中
// 如果不写第二个参数，就直接打包在`JS`目录下。
const index = r =& require.ensure([],() =& r(require('@/components/index')))
3.将JS文件放在body的最后
默认情况下，build后的index.html中，js的引入实在是在head中，使用html-webpack-plugin插件，将inject的值改为body。就可以将js引入放到body最后。
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
inject:'body'
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。
在webpack设置中添加externals，忽略不需要打包的库。
module.exports = {
context: path.resolve(__dirname, '../'),
app: './src/main.js'
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
// 格式为'aaa':'bbb'，其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter
在index.html中使用cdn引入
src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"&&
src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"&&
src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"&&
src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"&&
去掉原有的引用，否则还是会打包
//去掉import，如：
//import Vue from 'vue'
//import Router from 'vue-router'
//去掉Vue.use(XXX)，如：
//Vue.use(Router)
5.压缩代码，移除console
使用UglifyJsPlugin插件来压缩代码和移除console
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console:true,
pure_funcs:['console.log']
sourceMap: config.build.productionSourceMap,
parallel: true
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！vue-cli+webpack优化首页加载速度慢的问题
最近在公司用vue-cli+webpack开发项目，一开始开发的时候没有注意页面加载速度慢的问题，是在开发好后放到测试服务器上做集成测试的时候，发现第一次访问页面或者open打开一个新tab页的时候加载都很慢，有时候在网速不好的情况下一个页面需要十几秒甚至二十几秒的时间才加载完毕，这样的速度完全影响用户体验。
于是就开始分析速度慢的原因，打开chrome控制台的network,重新刷新页面，发现请求资源中一个vendor.js文件下载需要十几秒，后来打开文件夹一看，这个js文件竟然有1.5M多，有时候下载时间接近10秒，而且这个文件没下载完，页面是不会开始渲染的。
这个vendor.js文件是webpack打包后生成的，他是将项目用到的所有第三方依赖包都放到这个文件里，当使用到的包比较多时会显得这个文件很大，所以接下来我们就需要对这个文件进行优化，减少体积。我优化步骤如下：
1.分析vendor.js体积大的原因
首先，我先按照网上的建议配置好analyz（一个分析项目文件的体积大的原因，网上很多配置教程，这里不予说明），运行命令后发现vendor.js体积大主要是依赖的element-ui, echarts 和babel-polyfill这三个包比较大。一定要先做这一步，找到文件大的原因，不然无法下手。
2. 将插件用CDN方式引入
找到原因后，我将echarts和babel-polyfill这两个插件用CDN的方式在index.html中引入
3. 组件按需引入
element-ui本来也可以用CDN的方式引入，但由于我们针对项目的要求改了一点源码，所以就没办法用这个方法了。但之前是将整个elemeny-ui包引入项目，实际上我们在项目中没有用到全部的组件，所以后来就选择按需引入，只引入项目用到的组件，按需引入的配置可以查看element-ui的官网，有说明。
4.使用webpack的DLLPlugin插件
之后再运行analyz命令查看，发现vendor.js的体积减小了很多了，从1.5M减小到600多K，但感觉还是有点大，之前在网上有看到可以分离vendor.js, 利用webpack的DLLPlugin插件可以抽离vendor.js的部分包，这个教程网上也有很多，这里我就不再啰嗦了。
5.服务器开启gzip文件传输
经过以上的步骤，vendor.js的体积已经减小到了400多K，虽然感觉还是有点大，但相比之前的1.5M已经小很多了。之后我们还开启了gzip压缩传输，就是在服务器上设置，浏览器访问服务器时，如果浏览器支持gzip文件，服务器就返回gizp文件，否则就返回没有压缩的文件，这个方法虽然需要浏览器先支持gzip解压，但现在大部分主流的浏览器均已支持。
6.服务器设置文件缓存
最后我们还设置服务器支持缓存，当打包的文件哈希值没有变时，就代表我们的文件没有更改，这时浏览器可以使用缓存的文件，不需要再向服务器请求，只有当请求的文件的哈希值改变或者缓存时间过期时才再一次向服务器请求。
经过以上的优化后，我们再访问页面时，加载速度从最先开始的十几秒到现在只需要两三秒左右就加载完了，有时候在网速正常的情况下仅需一秒就加载出来了，不过我测试的浏览器是支持gzip文件的。
最后总结一下，我写的这个性能优化比较简单，相当于只说了可以做些什么来提升性能优化，但具体怎么实现需要另外查资料，网上教程很多，所以这里我没有写得很详细。我当初也是按照网上的教程一步步配置实现的，整个优化过程不难，难的是理解这些实现的原理，需要点耐心研究下，当你真正理解后，你会觉得特别有成就感。
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vue-cli构建的项目，首屏加载为什么慢？是因为多了 模块解析 + virtual Dom解析的步骤吗？
相对于传统页面vue-cli构建的中型大小的项目首屏加载速度会慢多少？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为没有 build
该答案已被忽略，原因：不符合答题规范
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为构建出来的是单页应用了。可以使用异步形式加载组件。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。用了react 或者 vue，如何做SEO优化呢？ - 知乎558被浏览<strong class="NumberBoard-itemValue" title="6,804分享邀请回答447 条评论分享收藏感谢收起

我要回帖

更多关于 react首屏加载优化 的文章

 

随机推荐