精华内容
参与话题
问答
  • vuecli做了个spa项目,大概有几十个个路由 直接 npm run build打包出来,有一个 1M的巨大 js文件,导致首页白屏时间过长 分析工具 vuecli 2.x自带了分析工具,只要运行 npm run build --report 如果是 vuecli 3的话...

    vuecli做了个spa项目,大概有几十个个路由
    直接 npm run build打包出来,有一个 1M的巨大 js文件,导致首页白屏时间过长

    分析工具

    vuecli 2.x自带了分析工具,只要运行 npm run build --report

    如果是 vuecli 3的话,先安装插件

    cnpm intall webpack-bundle-analyzer -–save-dev
    

    然后新建vue.config.js,对 webpack进行配置:

    chainWebpack: (config) => {
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
            if (process.env.npm_config_report) {
                config
                    .plugin('webpack-bundle-analyzer')
                    .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                    .end();
                config.plugins.delete('prefetch')
            }
        } }
    

    再运行 npm run build --report

    会在浏览器打开一个项目打包的情况图,便于直观地比较各个 bundle文件的大小

    在这里插入图片描述

    优化策略:

    1、路由懒加载

    在 router.js文件中,原来的静态引用方式,如:

    import ShowBlogs from '@/components/ShowBlogs'
    
    routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
    

    改为:

     routes:[ 
     		path: 'Blogs',
     		name: 'ShowBlogs',
     		component: () => import('./components/ShowBlogs.vue')
     	]
    

    如果是在 vuecli 3中,我们还需要多做一步工作
    因为 vuecli 3默认开启 prefetch(预先加载模块),提前获取用户未来可能会访问的内容
    在首屏会把这十几个路由文件,都一口气下载了
    所以我们要关闭这个功能,在 vue.config.js中设置:

    在这里插入图片描述

    2、ui框架按需加载

    这里以饿了么ui为例:
    原本的引进方式引进了整个包:

    import ElementUI from 'element-ui'
    Vue.use(ElementUI)
    

    但实际上我用到的组件只有按钮,分页,表格,输入与警告
    所以我们要按需引用:

    import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
    Vue.use(Button)
    Vue.use(Input)
    Vue.use(Pagination)
    Vue.prototype.$alert = MessageBox.alert
    

    注意 MessageBox注册方法的区别,并且我们虽然用到了 alert,但并不需要引入 Alert组件

    在 .babelrc / babel.config.js文件中添加( vue-cli 3要先安装 babel-plugin-component):

    plugins: [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    

    3、gzip压缩

    安装 compression-webpack-plugin

    cnpm i compression-webpack-plugin -D
    

    在 vue.congig.js中引入并修改 webpack配置:

    const CompressionPlugin = require('compression-webpack-plugin')
    
    configureWebpack: (config) => {
            if (process.env.NODE_ENV === 'production') {
                // 为生产环境修改配置...
                config.mode = 'production'
                return {
                    plugins: [new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/, //匹配文件名
                        threshold: 10240, //对超过10k的数据进行压缩
                        deleteOriginalAssets: false //是否删除原文件
                    })]
                }
            }
    

    在这里插入图片描述

    在服务器我们也要做相应的配置
    如果发送请求的浏览器支持 gzip,就发送给它 gzip格式的文件
    我的服务器是用 express框架搭建的
    只要安装一下 compression就能使用

    const compression = require('compression')
    app.use(compression())
    

    注意,后面这一句,要放在所有其他中间件注册之前

    性能优化是一个非常令人愉悦的过程,同时也是个深坑,有着太多东西,本篇文章开了个头,希望能对大家有所帮助,也欢迎大家一起交流~

    展开全文
  • 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多 体验一下就上来了
    在这里插入图片描述

    展开全文
  • 基于vue的页面加载优化详谈,主要列举了部分优化的点,包括客户端以及服务端

     

    页面加载性能是一个老生常谈的问题,但是却异常重要,尤其在访问量大的商业软件中。但是有很多开发者在开发过程中压根就没有考虑过这个问题。大家在开发业务代码的过程中,也就忽略了这个增加工作量,也不会带来什么直观的工作内容。


    写在前面,这里以vue框架为例,基于vue-cli3的开发方式

    首先,使用webpack分析工具,查看当前项目的依赖,分析依赖及打包情况,对症下药

    安装插件

    npm i webpack-bundle-analyzer -D

    在vue.config.js中,添加如下配置:

    chainWebpack: (config)=>{
        /* 添加分析工具*/
        if (process.env.NODE_ENV === 'production') {
          if (process.env.npm_config_report) {
            config
              .plugin('webpack-bundle-analyzer')
              .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
              .end()
            config.plugins.delete('prefetch')
          }
        }
    
        ...
      }

    执行命令

    npm run build --report

    执行成功后,浏览器会打开一个窗口,显示当前依赖的大小及各打包文件情况

    结合自己的项目情况,分析依赖的引入及打包情况,有以下几点优化方式

    第一,路由懒加载。

    查看打包目录中,js文件夹下的chunk-哈希值的文件为采用懒加载形式时生成的文件,一个路由会生成一个文件。

    const home= () => import('@/pages/home/index.vue')

    第二,使用CDN引入第三方依赖。

    比如,直接引入ehcarts会发现占打包文件较大的空间,如果项目没有特殊要求,可以采用CDN的方式引入;其他诸如axios、vue、lodash等都可以采用这种方式。

    • 在index.html中引入CDN资源
    ...
      <body>
        <div id="app">
        </div>
        <!-- built files will be auto injected -->
        <script src="//cdn.bootcss.com/echarts/4.2.1/echarts.simple.min.js"></script>
      </body>
      ...
    • 修改vue.config.js配置文件
    module.exports = {
        configureWebpack: {
          externals: {
            'echarts': 'echarts' // 配置使用CDN
          }
        }
       }

    externals中的key是用于import,value表示的在全局中访问到该对象,就是window.echarts

    在vue中使用echarts的时候无需 import echarts,可直接使用

    第三,按需加载第三方类库

    比如,项目中使用了 lodash 库,如果不是大量使用里面的方法的话,可以这样引入

    import _cloneDeep from 'lodash/difference' // 或者 const _cloneDeep = require('lodash/difference')
    const o = _cloneDeep ({a: 1, b: 2}) 

    也可以借助第三方插件的形式,lodash-webpack-plugin和babel-plugin-lodash。

    在使用中还是采用原有的 import _ from 'lodash'方式,只是借助插件,在打包时webpack会根据使用的方法按需打包

    先安装依赖

    npm install lodash-webpack-plugin babel-plugin-lodash -D

    上述插件可能部分已经存在于项目中,可以根据实际删除

    接着修改 vue.config.js

    
    const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
    
    module.exports = {
      configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
            return{
               plugins: [
                  new LodashModuleReplacementPlugin(), //优化lodash
               ]
            }
         }
      }
    };

    附:使用 IgnorePlugin 插件优化 moment.js

    
    const webpack = require('webpack');
    
    module.exports = {
      configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
            return{
               plugins: [
                  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // 忽略/moment/locale下的所有文件
               ]
            }
         }
      }
    };

    按需引入 element-ui,参见官方文档即可,其他组件库类似

    注:如果是按需一次性在main.js中引入,虽然比全部引入要小一些,但是也会一定程度上影响首次加载,这个看项目而行吧。

    按需引入后element-ui小了很多,不过看到文章开头的图上显眼的 table.js后想到, table组件只有后台管理页面用到了,不需要全局注册,所以我们删除 main.js中 Table和 TablColumn的引用,并在后台组件中局部注册。

    这里处理的思路就是,将按需引入处理到极致。如果是对首屏要求很高,可以采用这种方式,哪里用到哪里才引用,这其实也是平时开发中的一种良好习惯。

    chunk.venders.js 。如果是文件为第三方依赖的打包后文件,在做完这些优化之后,会发现这个文件有显现的减小。

    第四,打包时去掉sourceMap文件

    修改 vue.config.js 配置

    module.exports = {
      productionSourceMap: false
    }

    第五,将静态资源使用cdn加载

    将项目中的静态资源js css等放在oss服务器或者其他地方,减小服务器压力

    第六,开启 gzip压缩

    我在项目中启用压缩后,文件大小减少了70%以上,优化效果十分明显。

    下图是在简单做了部分优化之后的加载过程(优化开始时忘了截图),耗时8s以上。服务器端配置以 nginx 为例

    如果 Nginx 服务器开启 gzip,会将静态资源在服务端进行压缩,压缩包传输给浏览器后,浏览器再进行解压使用,这大大提高了网络传输的效率,尤其对 js,css 这类文本的压缩,效果很明显。

    客户端

    安装依赖

    npm i -D compression-webpack-plugin

    修改 vue.config.js 配置

    const path = require('path')
    const CompressionPlugin = require('compression-webpack-plugin')
    
    module.exports = {
     ...
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
              new CompressionPlugin({
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
                threshold: 10240, // 归档需要进行压缩的文件大小最小值,这里是10K以上的进行压缩
                deleteOriginalAssets: false // 是否删除原文件
              })
            ]
          }
        }
      }
    }
    

    打包后,查看js文件

    可以看到所有文件都被压缩了三分之二以上

    在服务器我们也要做相应的配置

    # 开启|关闭 gzip。
    gzip on|off;
    # 文件大于指定 size 才压缩,以 kb 为单位。
    gzip_min_length 10;
    # 压缩级别,1-9,值越大压缩比越大,但更加占用 CPU,且压缩效率越来越低。
    gzip_comp_level 2;
    # 压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    # 开启后如果能找到 .gz 文件,直接返回该文件,不会启用服务端压缩。
    gzip_static on|off
    # 是否添加响应头 Vary: Accept-Encoding 建议开启。
    gzip_vary on;
    # 请求压缩的缓冲区数量和大小,以 4k 为单位,32 为倍数。
    gzip_buffers 32 4K;

    注:遇到服务端开启gzip后,并没有生效的问题,发现是nginx配置压缩文件类型时 application/x-javascript,如果是这样的写法则并不会生效。

    JavaScript的MIME类型通常为“application/x-javascript”, 非IE的浏览器认“application/javascript”,

    所以在上述配置中 application/javascript 和 application/x-javascript 并用,可以解决该问题。

    然后重启nginx服务

    systemctl restart nginx.service

    当在请求中出现如下标识,即开启成功

    再对比一下资源加载时间

    前者为启用压缩前,后者为压缩后,时间从8.33s减少到了2.44s,效率提高了70%以上

    第七,冗余代码

    打包文件 app.哈希.js 中为所有vue文件打包的集合。

    基于此,把项目中的冗余代码,注释的多余代码删除一通后,你会发现文件会变小。

    可能人就是这样,在项目中觉得多几行css 多几个标签觉得不会对页面产生什么影响,但是如果做一通优化之后看到了‘数字性’的减少,才会思考编写高性能代码对加载性能的影响。

    第八,浏览器缓存

    浏览器缓存可以分为强缓存和协商缓存,根据实际应用场景来选择缓存方式或者结合使用。一般来讲一些基本不会变化的静态资源文件可以设置强缓存,更新频繁的文件不要设置缓存。而启用缓存的好处在于,在某个时间段内可以减少发送请求的数量,从而使页面响应更快,也就有更好的页面体验。

    基本原理:浏览器缓存分强缓存和协商缓存,他们是将网络资源存储在本地,等待下次请求该资源时,如果命中就不需要到服务器重新请求该资源,直接在本地读取该资源。

    • 强缓存:在web服务器返回的响应中添加Expires和Cache-Control Header
    • 协商缓存:通过【Last-Modified, If-Modified-Since】和【ETag, If-None-Match】两对Header分别管理

    关于缓存的详细介绍,推荐一篇文章,时空隧道

    第九,图片压缩

    图片压缩是常用的手法,因为设备像素点的关系,UI给予的图片一般都是 x2,x4的,所以压缩就非常有必要。

    第十,spilt chunks

    在没配置任何东西的情况下,webpack 4 就智能的帮你做了代码分包。入口文件依赖的文件都被打包进了main.js,那些大于 30kb 的第三方包,如:echarts、xlsx等都被单独打包成了一个个独立 bundle。

    其它被我们设置了异步加载的页面或者组件变成了一个个chunk,也就是被打包成独立的bundle。

    它实际分包的策略是这样的:

    • 新的 chunk 是否被共享或者是来自 node_modules 的模块
    • 新的 chunk 体积在压缩之前是否大于 30kb
    • 按需加载 chunk 的并发请求数量小于等于 5 个
    • 页面初始加载时的并发请求数量小于等于 3 个

    在实际项目中可以自行配置分包策略,示例如下:

    splitChunks({
      cacheGroups: {
        vendors: {
          name: `chunk-vendors`,
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial',
        },
        dll: {
          name: `chunk-dll`,
          test: /[\\/]bizcharts|[\\/]\@antv[\\/]data-set/,
          priority: 15,
          chunks: 'all',
          reuseExistingChunk: true
        },
        common: {
          name: `chunk-common`,
          minChunks: 2,
          priority: -20,
          chunks: 'all',
          reuseExistingChunk: true
        },
        elementUI: {
          name: 'chunk-elementUI', // split elementUI into a single package
          priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
        },
      }
    })
    

    也可以通过按需加载的形式进行分包,使得我们的包分散开,提升加载性能。

    推荐一篇文章:webpack按需加载

    第十,webpack配置

    另外webpack也有很多策略可以减少包的大小或者分包缓存的方式,结合浏览器缓存策略从而在更新包或用户访问时减少服务请求,体验优化

        // 指定环境变量
        // 当NODE_ENV未设置production为时,Vue.js会进行其他检查并显示警告,一些库基于此变量的行为会有所不同。
        // 这种检查和警告通常在生产中是不必要的,但是它们保留在代码中并增加了库的大小
        // 在webpack 4中,通过添加以下optimization.nodeEnv: 'production' 选项将其删除
        config.optimization.nodeEnv('production')
        // 压缩代码
        config.optimization.minimize(true)
    
        // it can improve the speed of the first screen, it is recommended to turn on preload
        // it can improve the speed of the first screen, it is recommended to turn on preload
        config.plugin('preload').tap(() => [{
          rel: 'preload',
          // to ignore runtime.js
          // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
          fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
          include: 'initial'
        }])
        // when there are many pages, it will cause too many meaningless requests
        config.plugins.delete('prefetch')
        // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
        config.optimization.runtimeChunk('single')

    webpack 的optimization.runtimeChunk这个配置项的具体作用是优化持久化缓存的。 runtime 指的是 webpack 的运行环境(具体作用就是模块解析, 加载) 和 模块信息清单, 模块信息清单在每次有模块变更(hash 变更)时都会变更, 所以我们想把这部分代码单独打包出来, 配合后端缓存策略, 这样就不会因为某个模块的变更导致包含模块信息的模块(通常会被包含在最后一个 bundle 中)缓存失效. optimization.runtimeChunk 就是告诉 webpack 是否要把这部分单独打包出来

    假设一个使用动态导入的情况,在`app.js`动态导入`component.js`

    const app = () =>import('./component').then();

    build之后,产生3个包。

    • `0.01e47fe5.js`
    • `main.xxx.js`
    • `runtime.xxx.js`

    其中`runtime`,用于管理被分出来的包。下面就是一个`runtimeChunk`的截图,可以看到`chunkId`这些东西。

    ...
    function jsonpScriptSrc(chunkId) {
    /******/         return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"01e47fe5"}[chunkId] + ".bundle.js"
    /******/     }
    ...

    采用这种分包策略,当内容改变时可以将文件变化降到一个小文件的粒度。从而不必要更新整个文件,对于访问页面和更新文件都比较友好。更多官方策略讲述,点击这里

    推荐一篇webpack性能优化的文章,查看

    webpack压缩代码的文章,查看

    好啦,文章提到的优化方式基本就是这些,当然优化也不至于此,还有网络加载优化、页面渲染优化(动画、重排、重绘等)、浏览器文件缓存等等。如果有更好的优化方式欢迎评论。

    写在最后,页面优化本身是一件很抽象的工作,但是我们却可以通过平时的编码规范来促成更可靠的页面。优化的过程也是一个见仁见智的过程,要结合实际项目实际分析。优化的过程也会引发我们对于编码时的一些思考,原来这样写对页面加载会更友好,不知不觉中也能促进编写高可用的能力。

     

    展开全文
  • vue-cli3首屏加载优化

    千次阅读 2019-05-16 17:55:51
    首屏加载优化 项目基于vue2.x+vue-router + vuex + element-ui 结合 vue-cli3.0 背景和结果:项目上线完首屏加载比较慢,加载时间为11s+,优化之后加载时间控制在4s左右,打包体积从原来的5.76M变为2.54M。 优化方向...

    首屏加载优化

    更新于2019-07-11

    项目基于vue2.x+vue-router + vuex + element-ui 结合 vue-cli3.0.
    背景和结果:项目上线完首屏加载比较慢,加载时间为11s+,优化之后加载时间控制在4s左右,打包体积从原来的5.76M变为2.54M。

    优化方向:

    • 1.组件按需加载。

    • 2.将图片压缩。

    • 3.cdn引入资源(vue,vuex,vue-router,组件库等)

    • 4.利用gzip(需要服务器开启gzip)

    其他:去除注释及多余代码,利用七牛云这种cdn网站存放静态资源!!
    如果你想占领速度的高地,你还是得 SSR(官网)

    一些工具
    Webpack Bundle Analyzer插件,webbpack的打包分析工具 Webpack Bundle Analyzer;
    图片压缩网站:TinyPNG BEJSON
    测速网站:Pingdom / webPageTest(推荐)
    webpack打包分析工具安装:

    npm install --save-dev webpack-bundle-analyzer //npm安装
    yarn add -s webpack-bundle-analyzer -D//yarn 安装
    

    接着还需要在vue.config.js里面配置①

    module.exports = {
        baseUrl: process.env.NODE_ENV == 'production' ? './' : '/',
        outputDir: 'dist',
        assetsDir: 'static',
        chainWebpack: config => {//①这里是配置的部分
          config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        },
    }
    

    然后运行项目就会有这样一个页面出来,表示打包后的文件大小(鼠标滑入文件块显示)。你就根据这个不断优化看你的项目文件优化后大小。
    在这里插入图片描述

    图片压缩网站,拖拽图片到该位置,自动压缩,大点的png图片图片压缩还是可观的,最后用ps改下后缀名为jpg,或者直接改,能用就行。为什么呢,因为我发现jpg的图片即使很大(有些jpg压缩不了,尴尬),但是请求时间比相同大小的png图片用时更少,后面再去了解原因。
    补充: 我们ui用的是蓝湖,我下载jpg格式比png格式体积更小,利用那个网站压缩的比例也更高!图片模糊程度肉眼看不出来。
    用了第一个网站压缩的情况下,还能用上面提供的第二个网站压缩一下,效果可观的!
    在这里插入图片描述
    测速网站:将你部署的网站域名,放入URL即可。等待一会结果就出来了。选Asia,如果你是国际网站那么就需要选其他地方都测试下看。

    在这里插入图片描述


    正题开始
    组件按需加载
    官网说的很明白了

    //main.js
    import {Input,Radio,FormItem,Icon,Row,Col,Upload,Message,MessageBox} from 'element-ui'
    
    Vue.use(Input);Vue.use(Radio);Vue.use(FormItem);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);
    Vue.use(Loading);Vue.use(DatePicker);Vue.use(Table);Vue.use(TableColumn);
    //Vue.use(Message);Vue.use(MessageBox);//
    

    上面message与MessageBox如果你用Vue.use()方法使用,他会自动执行一遍如果要用这样用
    方法一:全局使用

    Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;//因为我用到了confirm
    

    方法二:需要的模板内使用

    //user.vue
    import Message from 'element-ui'
    mounted(){
    Message.error(“错误!“)}
    

    CDN引入
    几个cdn资源站: jsdeliver , bootCDN, unpkg 后面这个网站搜的时候在地址后面加 ‘/搜索包’,
    首先在html中script标签引入

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
        <link rel="shortcut icon" type="images/x-icon" href="logo1.png">
    
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.4.8/lib/theme-chalk/index.css">
    
        <script src="https://cdn.jsdelivr.net/npm/lottie-web@5.5.5/build/player/lottie.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.min.js"></script>
        <!--你如要用vue devtools,需引用vue.js-->
        <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/element-ui@2.4.8/lib/index.js"></script>
    
        <script src="https://cdn.jsdelivr.net/npm/crypto-js@3.1.9-1/index.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.0.0-rc.1/bin/jsencrypt.min.js"></script>
    	
        <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
    	
    	<script src="https://cdn.bootcss.com/iview/3.4.2-rc.1/iview.min.js"></script>
        <title>Title</title>
    </head>
    

    vue.config.js

    module.exports = {
        // 部署应用的根路径(默认'/'),也可用相对路径(存在使用限制)
        baseUrl: process.env.NODE_ENV == 'production' ? './' : '/', 
        outputDir: 'dist',
        assetsDir: 'static',
        configureWebpack: {//这里是添加的部分
          externals:{
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'element-ui': 'ELEMENT',
            'axios': 'axios',
            'echarts': 'echarts',
    	    'lottie-web': 'lottie',
            'jsencrypt': 'JSEncrypt',
            'iview': 'iview'
          }
        },
    }
    

    gzip
    这个优化方式需要服务器(后端)开启gzip,这里我只说一下前端需要做的事情

    注意: gzip_static 生效的前提是nginx(如果用的是nginx)开启了gzip_static压缩并且请求目录下存在名称相同且以.gz 结尾的文件。
    使用 gzip_static 压缩的话要先准备好压缩后的 gz 文件,并且服务器会消耗更多的空间来存储压缩文件和原文件,这个有利有弊要自己衡量。

    参考: 首屏优化加载 github/vue-cli3-config

    先安装 compression-webpack-plugin 插件

    npm  i compression-webpack-plugin -save-dev
    //或者
    yarn -D compression-webpack-plugin
    
    //vue.config.js
    const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);//检测构建环境
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    module.exports = {
    configureWebpack: config => {
          if(IS_PROD){
            const plugins = [];
            plugins.push(
              new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
              })
            );
            config.plugins = [
              ...config.plugins,
              ...plugins
            ];
          }
        }
    };
    

    然后打包(yarn build)可以看到超过10k的文件均进行了打包,拥有.gz后缀的同名文件


    nginx配置gzip:

    server {
      server_name localohst;
      gzip on;  #开启gzip压缩
      gzip_min_length 1; #最小的长度,1K,文件如果太小,小于1K,就不会压缩,因为没准压缩之后还要变大
      #设置缓存的单位,压缩的时候要分配的缓冲区,缓冲区以16K为单位,往缓冲区写入内容的时候超过16K的时候,那么就会按照4倍的大小创建新的缓冲区,也就是建立一个64K的存储,这样把压缩的内容倒进去
      gzip_buffers 16 8k; 
      #压缩级别1-9,比如level为1的话,压缩的比例比较低,但是效率比较高,比如100K的文件压缩之后还剩40K或者50K,但是处理的时间很短;如果level为9的话,压缩的效果最好,效率会低一点,比如还是100K的文件,压缩的会更小,甚至20K ,这样对cpu消耗会高点,一般设置中间差不多
      gzip_comp_level 6;   
      #定义了压缩的类型,比如文本的,js、css等文本文件压缩,像是图片啊,就没必要定义了,本身就支持,这里就不需要定义了,默认压缩text/html 不需要指定,否则报错
      gzip_types
        text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
        text/javascript application/javascript application/x-javascript
        text/x-json application/json application/x-web-app-manifest+json
        text/css text/plain text/x-component
        font/opentype application/x-font-ttf application/vnd.ms-fontobject
        image/x-icon;
        
      gzip_disable "MISE [1-6]\.";#ie1~6禁用gzip
      gzip_vary on; #是否在http header中添加Vary: Accept-Encoding
    }
    

    nginx配置更多细节


    关于vue-cli4.x创建的项目中vue.config.js配置cdn和图片压缩参考这里: vue-cli4-config

    写出来是一个记录和相互学习的目的!

    你想吃彩虹糖吗?我有长颈鹿,可以挤给你!

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

    千次阅读 2019-11-21 15:04:30
    单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案 **1. 使用CDN资源,减小服务器带宽压力 2. 路由懒加载 3. 将一些静态js css放到其他地方(如OSS),减小服务器压力 4. 按需加载...
  • 提升用户体验,提升首屏组件加载速度,解决白屏问题 2、代码示例 2.1 未使用路由懒加载 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router...
  • VUE 首屏加载时间优化

    2019-05-13 11:03:07
    Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 解决方法是,将...
  • Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 解决方法是,将...
  • 单页应用普遍存在一个问题,首屏加载的数据较大,因此时间上会稍长,可以从以下三个方面着手优化。 1、引入在线资源 替代 依赖包 在index.html使用cdn引入部分资源,例: <body > <script src=...
  • vue首屏加载优化

    2017-07-04 22:43:58
    vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: ...
  • vue首屏加载优化

    千次阅读 2018-10-12 11:12:04
    vue首屏加载难免会有过慢的问题 解决方法可以有下面几点 1.固定模块,可以使用CDN Axios、Element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中。 1)在项目根目录index.html使用...
  • 使用vue构建项目首屏加载时,出现加载慢,白屏的问题解决方案: 步骤一 webpack来打包vue项目,vendor.js过大问题解决 1.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯...
  • 我实际的项目首屏加载从 12s 左右优化到 4s 左右。由于是演示项目,并没有开发其他的页面和功能,效果不是很明显,大家可以自行踩坑。大家有更好的方案,可以共同学习! 我们以 vue-cli 工具为例,使用 vue-router ...
  • VUE 首屏加载优化

    2018-08-17 17:26:26
    https://segmentfault.com/a/1190000010042512
  • 作者:谁动了我的橘子原文链接:https://juejin.im/post/5edf5b22e51d4578975a7024在Vue项目中,引入到工程中的所有js、css文件,编译时都会...
  • 浅谈vue首屏加载优化

    2020-08-27 07:24:52
    主要介绍了浅谈vue首屏加载优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue首屏加载优化

    2017-07-05 14:59:00
    vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码....
  • 我自己尝试用阿里云部署了一个简单的博客网站,但是加载速度非常慢,接近8s,所以尝试进行优化。 1,去掉map文件 首先默认的vue-cli会生成map文件,用于debug的时候快速定位源文件位置,但是我们部署到生产环境的...
  • 1. compression-webpack-plugin 插件压缩文件 cnpm i compression-webpack-plugin -D 安装依赖包(npm有时候会出错) 原理:把文件压缩成浏览器能够自动解压的 gizp 文件, 配合 nginx 配置开启 ...
  • Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。 解决方法是,将...

空空如也

1 2 3 4 5 ... 20
收藏数 3,771
精华内容 1,508
关键字:

vue首屏加载优化

vue 订阅