精华内容
下载资源
问答
  • 使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案: 步骤一 webpack来打包vue项目,vendor.js过大问题解决 1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯...

    使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案:

    步骤一 webpack来打包vue项目,vendor.js过大问题解决

    可以使用插件查看自己安装包的大小

    1.安装

    npm install --save-dev webpack-bundle-analyzer
    

    2. 在webpack.prod.conf.js中配置:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    plugins: [
    new BundleAnalyzerPlugin(
         {
              analyzerMode: 'server',
              analyzerHost: '127.0.0.1',
              analyzerPort: 8888, // 运行后的端口号
              reportFilename: 'report.html',
              defaultSizes: 'parsed',
              openAnalyzer: true,
              generateStatsFile: false,
              statsFilename: 'stats.json',
              statsOptions: null,
              logLevel: 'info'
            }
         ),
    ]
    

     配置就完成了,正常npm run build 结束后,就会自动打开一个打包生成文件的模块组成图在默认浏览器中,图中面积大的就是占据空间大的模块。

    展开全文
  • 主要介绍了浅谈VUE单页应用首屏加载速度优化方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 首屏加载速度优化-这篇就够了

    万次阅读 2019-06-22 18:17:54
    Vue-cli上线首屏加载优化vue项目首页加载速度的有效优化1.影响加载速度的原因2.分析文件大的原因利用webpack-bundle-analyzer 分析器,分析项目依赖关系3.项目依赖优化---插入链接与图片如何插入一段漂亮的代码...


    2019/06/22 周六 pm 天气晴 有点小困

    记 vue-cli项目首页加载速度慢的有效优化

    1.影响加载速度的原因

    开始我想把这个锅甩给网速,但我发现一些大商城项目(淘宝,京东),在网速一般的情况下,加载速度依然还是挺快,哎,网速不背这个锅
    还是找项目的原因吧,加载时间4.5s
    在这里插入图片描述
    监控首页加载的过程,找到拖后腿的 vendors***.js 这个锅他来背在这里插入图片描述
    1.9M 的 js文件下载3.42秒 ,先不说网速,这个js也太TM大了吧

    2.分析文件大的原因

    利用webpack-bundle-analyzer 分析器,分析项目依赖关系

    插件使用:

    // 文件路径 build --> webpack.prod.conf.js   
    //增加以下配置
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    ...
    plugins: [
    	...
        new BundleAnalyzerPlugin(),
        ...
    ]
    

    添加上面代码之后, 运行打包命令 npm run build,打包成功后会自动弹出 127.0.0.1:8888 像下面一样,看到许多小块,每个小块对应每个模块,小块越大文件越大

    看到vendor.js了吗? 这样是不是佷清楚的看到它里面到底都装了什么东西,恍然大悟,对滴, 它装的就是我们项目里应用的依赖
    在这里插入图片描述
    vendor.js 是被 依赖 (第三方库) 充大的 ,所以先检查每个依赖,是否存在引入但没有使用的闲置依赖包

    3.项目依赖优化

    排除了 闲置依赖包 的存在后,就需要对钢需依赖进行优化

    3.1 依赖优化之 CDN 加速

    ThinkerK 理解的 CDN加速:将自己的源码跟第三方库代码分离,减小项目体积, 利用别人的服务器去请求第三方库,来减轻自己服务器的压力

    针对体积比较大的一些钢需依赖,选择CDN加速的方式(以 echarts 来举例)

    1. index.html 文件中CDN引入第三方依赖
      //index.html
      <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
      
    2. 配置webpack 来分离 echarts webpack/externals使用详解.
      //文件路径 build --> webpack.base.conf.js
      
      module.exports = {
           externals: { //externals 里的库不会被webpack打包
         	    echarts: 'echarts',
           },   
      }
      
    3. 在需要使用依赖的地方 import 进来就可以 ,

    再次 npm run build 的时候,echarts 就不会被打包进去, vendor.js的体积就会减小

    3.2 依赖优化之 webpack dllplugin

    webpack.dll 其实更多是对webpack打包速度的优化,对优化首页加载速度方面效果不是佷明显,所以在这里只提一嘴。 有兴趣的话可以看下 webpack dllplugin的使用

    4. gzip暴力压缩

    gzip压缩能力很强,压缩力度可达到70%

    nginx开启 gzip 模式

    server {
            listen       8103;
            server_name  ************;
    		# 开启gzip
    	    gzip on;
    	    # 进行压缩的文件类型。
    	   	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    	    # 是否在http header中添加Vary: Accept-Encoding,建议开启
    	    gzip_vary on;
    }
    

    vue开启 gzip

    1. 安装compression-webpack-plugin
       npm i compression-webpack-plugin@1.1.12 --save-dev
      
      注意这里的版本 @1.1.12 如果不加版本号 在 npm run build 时会报错 因为compression最新版本跟webpack版本不匹配
    2. 配置 gzip
      //文件路径  config --> index.js
       build: {
          // Gzip off by default as many popular static hosts such as
         	// Surge or Netlify already gzip all static assets for you.
         	// Before setting to `true`, make sure to:
         	// npm install --save-dev compression-webpack-plugin
         	productionGzip: true,      //之前时false  改为true
         	productionGzipExtensions: ['js', 'css'],
       }
      

    配置完后的打包效果

    在这里插入图片描述
    浏览器上可以看到gzip
    在这里插入图片描述
    优化后的效果 比之前快4s多 体验一下就上来了
    在这里插入图片描述

    展开全文
  • 前言 ...如果希望能够有效地减少页面的响应...在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业...

    前言

    事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间,就必须关注剩余80%-90%的最终用户体验。
    –Steve Souders

    在这篇博客中,我根据工作中的实际项目经验和一些测试的经验中总结出了前端页面在性能上优化方案。其中一些经验吸收自《高性能网站建设指南》Steve Souders 著 电子工业出版社。

    一、 代码相关优化

    1. 将样式表放在首部-使用link标签将样式表放在文档的HEAD中

    • 遵循HTML规范,将样式表放在头部,可以有效避免白屏无样式内容的闪烁
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title></title>
      <!-- 使用link标签将样式表放在文档的HEAD中 -->
      <link rel="stylesheet" href="example.css">
    </head>
    
    <body></body>
    
    </html>
    
    

    2. 将脚本放在底部

    • 将脚本放在顶部会造成的影响: 脚本阻塞对其后面内容的显示; 脚本会阻塞对其后面组件的下载;

    • 将脚本放在底部</body>标签之前, 类似于document.body.appendChild(yourScript), 不会阻塞页面内容的呈现,而且页面中的可视组件可以尽早下载。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title></title>
      <link rel="stylesheet" href="example.css">
    </head>
    
    <body>
      <!-- 将脚本放在底部 -->
      <script src="example.js"></script>
    </body>
    
    </html>
    

    3. 减少HTTP请求

    1) CSS Sprites (雪碧图)

    多个图片合成一张图片,通过background-position来定位所需要的图片。每次请求的话只需要请求一张图片减少http请求。(如果使用图标的话建议使用svg,也可以使用iconfont)

    本地工具:

    在这里插入图片描述

    在线工具:

    在这里插入图片描述

    2) 内联图片和脚本

    • 通过内联图片和脚本无需额外的HTTP请求,图片小于10K的可以设置内联为base64位。
    <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4SUJRXhpZgAATU>
    

    3) 合并脚本和样式表

    • 一般来说,使用外部脚本和样式表对性能更有利,然而如果将模块化的代码分开放到多个小文件中,会降低性能,每个文件都会导致一个额外的HTTP请求

    4. 使用外部Javascript和css

    Good

    <link rel="stylesheet" href="example.css">
    
    <script src="example.js"></script>
    

    bad

    <style>
    // code
    </style>
    
    <script>
    // code
    </script>
    
    • 使用外部Javascript和Css的主要作用有: 可以配置缓存 有利于组件重用

    5. 使用CDN (内容分发网络 Content Delivery Network)

    CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡内容分发调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储分发技术。–摘自百度百科

    6. 代码压缩

    1) Gzip 压缩

    gzip压缩可以节省50%-70%的网络开销

    浏览器支持的压缩类型可以通过network的Accept-Encoding: gzip, deflate来查看。支持deflate的浏览器也支持gzip,但很多浏览器支持gzip却不支持deflate,因此gzip是最理想的压缩方法

    • node端 使用compression如果是webpack项目可以看下面的Vue首屏加载时间优化方案里的gzip压缩
    // npm install compression --save-dev
    const compression = require('compression')
    

    2) 代码压缩

    前端打包压缩的有grunt,gulp,webpack,可以对HTML,CSS,Javascript代码压缩

    二、 服务器相关优化

    本文中使用nginx服务器进行相关配置,使用apache同样可以做到相关优化,具体操作请另Google

    1. 开启gzip压缩

    • 服务端配置gzip压缩
    gzip on; # 开启Gzip
    gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k; # 不压缩临界值,大于1K的才压缩
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # 进行压缩的文件类型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";
    
    • 我的服务器nginx相关的配置:

    在这里插入图片描述

    2. 开启HTTP2

    HTTP2在前端性能上主要表现在:请求和响应的多路复用、头部压缩

    • 感受下多路复用

    在这里插入图片描述

    nginx服务器配置HTTP2

    在这里插入图片描述

    3. 开启缓存

    添加Expires头(强缓存)

    个人站点相关配置

    在这里插入图片描述

    nginx配置

    location ~.*\.(svg|woff|js|css){
    	root /yourFilePath;
    	expires 1d;
    }
    
    • Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止 HTTP规范中简要地称该头为“在这一日期时间之后,响应将被认为是无效的”。它在HTTP响应中发送
    expires: Thu, 30 May 2019 20:51:42 GMT
    
    • 上面的Expires头告诉浏览器该响应的有效性持续到2019年5月30日为止。如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片,将HTTP请求的数量减少一个

    Max-Age和mod_expires

    • 个人站点的css文件使用强缓存cache-control: max-age

    在这里插入图片描述

    • nginx配置
    server {
        add_header Cache-Control max-age=72000;
    }
    
    • 在解释缓存如何很好地改善传输性能之前,需要提及除了Expires 头之外的另一种选择。HTTP 1.1引入了Cache-Control头来克服Expires头的限制

    • 因为Expires头使用一个特定的时间,它要求服务器和客户端的时钟严格同步。另外,过期日期需要经常检查,并且一旦未来这天到来了,还需要在服务器配置中提供个新的日期。

    • Cache-Control使用max-age指令指定组件被缓存多久, 如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本,这就避免了额外的HTTP请求。一个长久的max-age头可以将刷新窗设置为未来10年

    Cache-Control: max-age=315360000
    
    • Expires 和Cache-Control max-age.如果两者同时出现,HTTP规范规定max-age指令将重写Expires头

    • 建议使用Cache-Control max-age,如果使用expires你需要担心它带来的时钟同步配置维护问题。

    配置ETag(协商缓存)

    Vue官方文档的Expires相关配置

    在这里插入图片描述

    浏览器必须产生这个HTTP请求,执行有效性检查, 但这仍比简单地下载所有已过期的组件效率要高(对比强缓存)。如果浏览器缓存中的组件是有效的(即它能够和原始服务器上的组件相匹配),原始服务器不会返回整个内容,而是返回一个304 Not Modifed状态码。

    附:Vue首屏加载时间过长详细优化方案

    • 首先附一张优化过后的图

    • 首屏加载时间从原来的10s2s,测试的个人站点

    在这里插入图片描述

    在这里插入图片描述

    注:我在优化vue项目的时候使用的是vue@2.6.6, vue-cli@3.4。 如果是cli2的项目影响也不大,优化的方案是结合服务端和webpack的。

    vue-cli脚手架默认配置已经大幅度优化了前端整体的性能,在此基础上,我又使用了三个优化项增加了大幅度提升

    1. gzip压缩

    • 结合服务器相关优化第一条:开启gzip压缩

    • 下面是前端项目中vue.config.js中的配置

    // 需要 npm install compression-webpack-plugin --save-dev
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    // 定义当前环境
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		// 如果是生产环境的话,开启压缩
    		if (ENV === 'production') {
    			//  参数配置文档: https://www.webpackjs.com/plugins/compression-webpack-plugin/
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
    		}
    	}
    }
    

    2. 使用CDN内容分发网络

    index.html文件中通过环境来判断是否引入cdn文件,在vue.config.js文件中webpack通过环境判断是否使用cdn引入文件的全局变量

    • 使用CDN需要在webpackindex.html进行相关配置

    第一步 配置vue.config.js,只需要在刚才配置Gzip压缩的基础上再加一段代码

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		if (ENV === 'production') {
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
                // 配置externals就是当使用CDN进入的js文件在当前项目中可以引用
                // 比如在开发环境引入的vue是import Vue from 'vue', 这个大写的Vue就是对应的下面的大写的Vue
    			config.externals = {
    			  'vue': 'Vue',
    			  'vue-router': 'VueRouter',
    			  'axios': 'axios'
    			}
    		}
    	}
    }
    

    第二步 配置index.html,在body里使用EJS语法判断是否为生产环境

    <body>
      <div id="app"></div>
      <% if (NODE_ENV === 'production') { %>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
      <% } %>
    </body>
    

    3. 配置sourceMap

    • devtool | webpack中文网 你可以根据官网来对开发环境和生产环境进行详细配置

    • 当然也可以像我一样直接productionSourceMap: false干掉生产环境的sourceMap

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    const ENV = process.env.NODE_ENV || 'development'
    
    module.exports = {
    	configureWebpack: config => {
    		if (ENV === 'production') {
    			config.plugins.push(new CompressionWebpackPlugin({
    				algorithm: 'gzip',
    				test: /\.(js|css|html)$/,
    				threshold: 10240,
    				minRatio: 0.8
    			}))
    			config.externals = {
    			  'vue': 'Vue',
    			  'vue-router': 'VueRouter',
    			  'axios': 'axios'
    			}
    		}
    	},
        // 禁用生产环境的sourceMap
        productionSourceMap: false
    }
    
    

    4. 使用HTTP2

    请参考服务端优化第二条

    结语

    前端性能优化至关重要,文中提及的是我认为比较重要的几点,以后遇到更好的方案会补充进来。当然你也可以在评论区留言我们一起探讨,有错误的地方欢迎指出。

    展开全文
  • VUE单页应用首屏加载速度优化方案

    千次阅读 2019-07-04 10:56:41
    单页应用会随着项目越大,导致首屏加载速度很!!!以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,...

    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案

    1. 使用CDN资源,减小服务器带宽压力
    2. 路由懒加载
    3. 将一些静态js css放到其他地方(如OSS),减小服务器压力
    4. 按需加载三方资源,如iview,建议按需引入iview中的组件
    5. 使用nginx开启gzip减小网络传输的流量大小
    6. 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口
    7. 使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件

    使用CDN资源,减小服务器带宽压力

    • 在index.html中引入cdn资源
    ...
      <body>
        <div id="app">
        </div>
        <!-- built files will be auto injected -->
        <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
      </body>
      ...
    • 修改 build/webpack.base.conf.js
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals:{
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex':'Vuex',
        'vue-resource': 'VueResource'
      },
      ...
    }
    • 修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource
    // import Vue from 'vue'
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource)

    路由懒加载

    require.ensure方式

    const workCircle = r => require.ensure([], () => r(require('@/module/work-circle/Index')), 'workCircle')
    const workCircleList = r => require.ensure([], () => r(require('@/module/work-circle/page/List')), 'workCircleList')
    

    import方式

    const workCircle = () => import('@/module/work-circle/Index')

    将一些静态js css放到其他地方(如OSS),减小服务器压力

    注意这里的js文件,需要将结果抛出,然后在需要用到该js的组件中import引入

    按需加载三方资源,如iview,建议按需引入iview中的组件

    按需引用请查看iview官方文档iview

    使用nginx开启gzip减小网络传输的流量大小

    clipboard.png

    配置nginx,可以参考Nginx开启Gzip压缩大幅提高页面加载速度

    webpack开启gzip压缩。 只需要服务器开启gzip压缩,服务器开启gzip压缩后,服务器拿到我们部署上去的文件,会压缩文件然后返回给浏览器。所以前端使用gzip压缩是没有起作用的。所以compression-webpack-plugin插件有什么用,各位探讨下QAQ

    这里需要配合Nginx服务器,Nginx开启gzip

    clipboard.png

    webpack4.x以下使用compression-webpack-plugin插件,插件版本应使用1.x
    webpack4.x版本以上可以使用compression-webpack-plugin 2.x
    • config/index.js中
    module.exports = {
      build: {
        ...
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目,这里默认为false
        productionGzipExtensions: ['js', 'css'],
    
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
      }
    }
    • build/webpack.prod.conf.js中

    使用vue-cli构建项目时,默认会有这段代码

    if (config.build.productionGzip) {
      const CompressionWebpackPlugin = require('compression-webpack-plugin')
      webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' +
            config.build.productionGzipExtensions.join('|') +
            ')$'
          ),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
    

    若首屏为登录页,可以做成多入口,登录页单独分离为一个入口

    使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件

    两个插件都不支持es6压缩,所以使用此插件前需要用工具(如babel-loader)转换es6代码

    问题描述:项目中使用iview时,导致使用UglifyJsPlugin压缩报错
    因为iview某插件中包含es6语法。然而两个插件都不支持es6压缩

    解决方法如下:

    • 修改webpack配置文件,使用babel-loader转换一下iview插件中的es6语法
    module.exports = {
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
    ...
      module: {
        loaders: [
          { test: /iview.src.*?js$/, loader: 'babel' },
          { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
        ],
        rules: [
        ...
          {
            test: /\.js$/,
            loader: 'babel-loader',
             // resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')解决iview打包时UglifyJs报错
            include: [resolve('src'), resolve('test'), resolve('/node_modules/iview/src'),resolve('/node_modules/iview/packages')]
          }
          ...
        ]
      }
    }
    • webpack生产环境中
    ...
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    ...
        new UglifyJsPlugin({
          // 使用外部引入的新版本的js压缩工具
          parallel: true,
          uglifyOptions: {
            ie8: false, // 启用IE8支持
            ecma: 6, // 支持的ECMAScript的版本(5,6,7或8)。影响parse,compress&& output选项
            warnings: false, // 显示警告
            mangle: true, // debug false
            output: {
              comments: false,
              beautify: false, // debug true
            },
            compress: {
              // 在UglifyJs删除没有用到的代码时不输出警告
              warnings: false,
              // 删除所有的 `console` 语句
              // 还可以兼容ie浏览器
              drop_console: true,
              // 内嵌定义了但是只用到一次的变量
              collapse_vars: true,
              // 提取出出现多次但是没有定义成变量去引用的静态值
              reduce_vars: true,
            }
          }
        }),
        // new webpack.optimize.UglifyJsPlugin({
        //   compress: {
        //     warnings: false
        //   },
        //   sourceMap: true
        // }),

    此方法有待实践,留待下次分享 ==

    展开全文
  • script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script src="https://unpkg.com/vue-router@3.2.0/dist/vue-router.js"></script> <script src=...
  • vue 首屏加载慢的问题

    2020-07-16 11:18:37
    项目遇到的问题总结(四):单页面首屏加载慢解决方案 VUE 单页应用首页加载特别的解决方法,(我自己没百度之前,想的是路由懒加载,图片懒加载,压缩cssjs) 百度之后,才发现菜鸡 我们一般打包后把 生成的...
  • vue 首屏加载优化 1、把不常改变的库放到 index.html 中,通过 cdn 引入 然后找到 build/webpack.base.conf.js 文件,在 module.exports = { } 中添加以下代码 externals: { 'vue': 'Vue', 'vue-router': 'Vue...
  • vue首屏加载优化

    2021-03-10 16:22:04
    1.异步路由加载 import Vue from 'vue' import Router from 'vue-router' // 之前的方案 ...// 异步加载方案 const Index = r => require.ensure([], () => r(require('@/pages/index')),
  • 路由懒加载方案 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 原来路由配置文件 ...
  • 最近在重构一个使用Vue做的网站,这个网站不可避免地出现了首屏加载的问题,那么为什么出现这个问题?怎么解决这个问题呢?这就是本篇博客要讨论的话题。 一、vue首屏加载的原因 毋庸置疑的,网速肯定...
  • 特别在移动端,单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步。 我的项目 vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,614
精华内容 5,045
关键字:

vue首屏加载慢优化方案

vue 订阅