精华内容
下载资源
问答
  • 为什么要优化编译速度 vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命 如何优化...

    为什么要优化编译速度

    vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命

    如何优化?

    百度或者谷歌,发现webpack有个插件DllPlugin,也有vuecli的版本vue-cli-plugin-dll,所以决定使用这个插件

    优化步骤

    插件地址

    vue add dll
    //使用这个命令安装vue的dll插件
    

    我在安装过程中报错,因为我用的是cnpm,后来删除nodemodules重新安装依然不行,最后我用yarn安装的依赖,然后成功了。如果在npm安装包的过程中莫名其妙会出错推荐使用yarn
    yarn下载地址
    我下载完删除了原来的nodemodules然后

    yarn add vue-cli-plugin-dll
    //使用这个命令安装vue的dll插件
    

    接下来就是dll的相关配置,将我们项目中的依赖使用dll插件进行动态链接,这样依赖就不会进行编译,从而极大地提高编译速度,因为这些插件没有编译,在vue.config.js中进行配置,也很简单

    module.exports = {
      pluginOptions: {
        dll: {
        //这里放的是你的依赖插件,就是你项目安装的其他的插件,将这些插件的名字依次加在后面,我建议将所有项目依赖插件全部放在后面
        //注意这里不能放webpack,gulp等需要node环境的插件,我尝试将babel等放到这里报错提示没有V8环境
          entry: ['vue', 'vue-router',"element-ui", "js-cookie"],
          //dll 编译后的链接库的地址
          cacheFilePath: path.resolve(__dirname, './public')
        }
      }
      }
    

    配置好之后然后运行,进行你上面配置插件动态链接库的编译

    //npm run dll 也可以
    yarn run dll
    

    dll编译完成后会在上面配置的目录下生成dll文件夹,就可以开始跑项目了,因为这些插件都不需要编译,跑起来很流畅,修改后的热更新速度更是显著提升。我以前修改一行代码热更新编译在30秒以上,使用这个以后基本十秒以内搞定。

    //你自己的项目启动script
    npm run serve
    

    更多插件的配置请到插件的github查看

    展开全文
  • 当一个较复杂的vue项目打包后,文件会非常大,而且访问时资源加载速度很慢,本文介绍了几种措施来优化
  • 近期在做一个VUE项目,项目越做越大,相继带来的问提也就越来越多,当前存在的问题是:1.开发过程中,修改一个文件,保存一下项目需要特别久。 2.npm run dev启动项目需要特别久。 吓人吧,作为开发者,相信...

    问题描述
    近期在做一个VUE项目,项目越做越大,相继带来的问题也就越来越多,当前存在的问题是:
    1.开发过程中,修改一个文件,保存一下项目需要特别久。
    在这里插入图片描述
    2.npm run dev启动项目需要特别久。
    在这里插入图片描述
    吓人吧,作为开发者,相信大家都懂那种感觉(想砸电脑)
    优化方法
    1.开启uglifyjs-webpack-plugin 的 cache(文件webpack.prod.conf.js)
    在这里插入图片描述
    该方法优化后npm run dev时间减少了10s左右
    在这里插入图片描述
    2.babel-loader配置(webpack.base.conf.js)
    在这里插入图片描述
    该方法优化后npm run dev时间减少了20s左右
    在这里插入图片描述
    3.eslint的忽略文件(.eslintignore)
    在这里插入图片描述
    这个效果npm run dev也是减少10s左右
    在这里插入图片描述
    4.模块热加载 HMR替代hotReload(vue-loader.conf.js)
    (1)关闭热重载(也可参照官网VUE官网关闭热重载
    在这里插入图片描述
    (2)模块热加载 HMR配置(webpack.dev.conf.js)
    ->配置webpakc-dev-server在这里插入图片描述
    ->配置对应的插件
    在这里插入图片描述
    ->最后入口文件配置HMR 的捕获代码,这个比较复杂,如果你只是希望保存修改的代码,会自动触发页面刷新,以保证页面上的代码是最新的,那么只需要上述步骤就好了。如果想了解更透彻,可参考大神的博客(我也是学习过程中发现的)大神webpack3(14)HMR模块热加载

    最终结果
    启动所需时间,比开始时减少了20s左右
    在这里插入图片描述
    修改保存需要时间,比开始时减少了40s左右
    在这里插入图片描述
    还好吧,有一定效果,有时间再搞搞,找大佬取取经。

    展开全文
  • 调用定位接口获取位置等信息,想着会不会是他们的问题,经过沟通,他们也是按照微信的接口文档进行操作,没有什么优化的空间,于是想着能不能提高我们首页的加载速度,百度一番,果然有相应的优化方法, 主要有以下...

    本文首发于个人公众号【Java技术大杂烩】,欢迎关注。

    前言

    之前做的一个Vue项目,流程大概这这样的:从公众号进入,由外系统获取用户的openid等信息,然后再跳转到项目首页进行加载初始化操作。

    业务最近反应进入首页很慢,于是大致排查了下,由于外系统需要去微信获取用户授权,用户的的openid,调用定位接口获取位置等信息,想着会不会是他们的问题,经过沟通,他们也是按照微信的接口文档进行操作,没有什么优化的空间,于是想着能不能提高我们首页的加载速度,百度一番,果然有相应的优化方法,

    主要有以下几个方法:

    1. 打包的时候不生成 「.map」 文件。
    2. 打包的时候生成 gzip 文件,部署的时候,让 「nginx」直接读取 gzip 文件。
    3. 路由加载的时候采用 「懒加载模式」
    4. 首页较大的图片适当的进行压缩。
    5. 三方库采用 「CDN」的方式引入。

    由于「CDN」的方式改动较多,所以这次优化没有采用该方法,而是采用了其他四种方法,在测试环境上进行测试加载速度提高了一倍,加载时间从4秒减少到2秒,在生产上网络较好应该要快些。下面来依次介绍下这几种方法的具体操作。

    分析文件大小

    在开始操作具体的优化方法之前,先来分析下哪些代码文件比较大,较大的文件可以进行压缩,使用 webpack-bundle-analyzer 来进行分析。

    1. 首先先执行 「npm install cross-env --save-dev」 安装 cross-env 依赖。
    2. package.json 文件的 scripts 下面加上:
    "analyze""cross-env NODE_ENV=production npm_config_report=true npm run build"

    如下图所示:

    在这里插入图片描述

    1. 在项目的根目录下执行 「npm run analyze」 命令,执行之后,在浏览器上会自动打开一个页面,显示项目具体的文件及大小,如下图:

    在这里插入图片描述

    可以看到,项目中vendor.js文件最大,为 184.9 KB,该文件是Vue打包的时候自动生成的;通过该方法可以看到哪些 js 是我们没有使用的或者可以优化的,如果没有使用可以进行删除。

    此外,把鼠标移到某个文件上面,还可以看到提示如果采用 gzip 压缩后的大小,比如vendor.js提示如果采用 gzip 进行压缩,压缩后的大小为61.26 KB,文件变小了,加载速度自然就快了嘛。

    优化之前

    先来看看优化之前的加载耗时情况:

    在这里插入图片描述

    可以看到:

    1. 总耗时 4.33 秒。
    2. app.css 文件大小为 1.1 MB,耗时 2.42秒。
    3. vendor.js文件大小为 434 KB,耗时 1.26秒。
    4. app.js文件大小 144 KB,耗时 598毫秒。
    5. 一张 png 图片大小 347 KB,耗时 1.51秒。

    到后台查数据的耗时反而很小,225毫秒。

    开始优化

    接下来,开始按照文章开篇的办法进行操作。

    方法一:不生成 .map 文件

    一般我们上生产的代码都会经过压缩,去空格,babel编译转化。然而压缩转化之后的代码和源代码之间的差异很大,当出现问题的时候会造成无法 DEBUG的问题,而编译后的 .map 文件主要是我们用来进行错误定位的。

    了解了.map文件作用之后,我们在本地开发测试的时候可以使用.map来进行调试,上生产了之后,bug基本修改完毕,所以在编译打包的时候可以不生成.map文件。

    在编译打包的时候,.map文件的生成是由 config/index.js文件的 「productionSourceMap」属性来控制的,为true的时候,会生成.map文件,为false的时候,不会生成.map文件,默认为true

    在这里插入图片描述

    所以我们把该属性设置为 false,编译打包的时候就不会生成.map文件了。

    在这里插入图片描述

    方法二:采用 gzip 压缩

    还记得在文章开篇提到的用webpack-bundle-analyzer来分析文件大小吗,把鼠标移到某个文件上面,会提示现在文件的大小是多少,gzip压缩之后文件的大小,

    要想进行 gzip压缩,首先在编译打包的时候,要生成.gz文件,然后 nginx 配置需要把 gzip模式 打开,访问项目的时候,自动会找到 .gz 的文件.

    1. 首先安装压缩插件,在项目根目录下执行如下命令安装:
    npm install --save-dev compression-webpack-plugin
    1. 然后把 config/index.js文件的 「productionGzip」属性设置为 true

    在这里插入图片描述

    图片中注释也写清楚了,设置为true之前先执行上述命令安装插件。

    1. build/webpack.prod.conf.js文件中的 asset改为 filename:

    在这里插入图片描述

    经过上面一系列操作之后,执行 npm run build 命令打包,此时在 dist 下会生成很多的 .gz文件,会比压缩之前的文件小了很多。

    在这里插入图片描述

    在这里插入图片描述

    1. 现在生成了 .gz文件之后,还需要配置 nginx 开启 gzip 模块,访问项目的时候,自动会找到 .gz 的文件。nginx 配置如下:
    http{
     gzip on;
     gzip_disable "msie6";
     gzip_vary on;
     gzip_proxied any;
     gzip_comp_level 8;
     gzip_buffers 16 8k;
     gzip_min_length 100
     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;
    }

    「======有坑=======」

    这里有一点要注意,安装 compression-webpack-plugin 插件之前,先到 package.json文件中看下你项目的 webpack的版本是多少,目前最新版需要运行在webpack4.0以上,如果你的webpack的版本号是3.x的,则安装compression-webpack-plugin 的时候,需要安装1.x的版本。

    我之前也是直接执行上面的命令安装,这样安装的是最新的版本,最新版本则要求webpack的版本在 4.0 以上,而我的webpack则是 3.6 的,所以我卸载了再重新指定安装了 1.1.12 版本的。命令如下:

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

    方法三:路由采用懒加载模式

    路由的懒加载模式可以解决首次加载资源过多导致的速度缓慢问题:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载即可。

    之前项目上采用的是非懒加载模式,即如下写法:

    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/views/index'
    import userList from '@/views/userList'

    Vue.use(Router);

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'index',
          component: index
        },
        {
          path: '/c',
          name: 'chargeTypeList',
          component: userList
        }
      ]
    })

    优化的时候,把它改为赖加载模式,即如下写法:

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router);

    export default new Router({
      routes: [
        {
          path: '/',
          name: 'index',
          component: resolve => require(['@/views/index'], resolve)

        },
        
    {
          path: '/c',
          name: 'chargeTypeList',
          component: resolve => require(['@/views/userList'], resolve)
        }
      ]
    })

    方法四:较大图片进行压缩

    在文章开头说的优化之前的加载耗时中,有张图片是 png格式的,大小为347 KB,耗时1.51秒:

    在这里插入图片描述

    优化的办法就是进行图片的压缩,改为 jpg的,大小为 199 KB,最后耗时 241 毫秒。

    在这里插入图片描述

    总结

    通过上述的几个方法优化之后,首页的加载耗时情况如下所示:

    在这里插入图片描述

    可以看到:

    1. 总耗时 1.75 秒。
    2. app.css 文件大小为 300 KB,耗时 887毫秒。
    3. vendor.js文件大小为 131 KB,耗时 610毫秒。
    4. app.js文件大小 30.7 KB,耗时 342毫秒。
    5. 图片大小 119 KB,耗时 241毫秒。

    在测试环境上多次测试后,平均下来,首页的加载速度从4秒左右提高到2秒左右。

    「完」

    在这里插入图片描述

    展开全文
  • vue优化(打包、编译

    千次阅读 2019-03-28 09:36:27
    关于vue打包和编译速度,在小型项目中可能体现的不明显,但是在中大型项目中,这是一个硬伤,会大大的降低开发速率。今天得空,就把我以前开发过程中总结的经验分享一下,其实也是自己结合前人的一些经验总结的。 ...

    关于vue打包和编译速度,在小型项目中可能体现的不明显,但是在中大型项目中,这是一个硬伤,会大大的降低开发速率。今天得空,就把我以前开发过程中总结的经验分享一下,其实也是自己结合前人的一些经验总结的。

    打包优化

    1.config/index.js

         屏蔽sourceMap 和 对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

    build: {
        ...
        productionSourceMap: false, // 屏蔽sourceMap
        productionGzip: true,// 启用压缩插件
        productionGzipExtensions: ['js', 'css','svg'],// 顶压缩文件的类型
        ...
    
      }

    启用压缩功能前提是需要webpack的支持,安装压缩插件: npm install --save-dev compression-webpack-plugin

        1).gzip会对js、css文件进行压缩处理,对于svg,ico文件以及bmp文件压缩效果达到50%

        2).对于图片进行压缩问题,png,jpg,jpeg没有压缩效果

        3).对项目文件进行压缩之后,需要浏览器客户端支持gzip以及后端支持gzip。

     2.对路由组件进行懒加载:

        当项目比较大,加载的资源比较多时,会出现首次加载白屏现象。因此需要对路由或者组件进行懒加载,用到他们的时候才加载,而不是一进入就加载所有。

        {
          path: "/home",
          component: resolve=>require(["@/home"],resolve)
        },

    3.优化代码:

         1).数据列表渲染时时刻记住定义key值,以便vue内部diff算法能精确定位

         2).v-show和v-if的合理使用,对于切换频率高的数据用v-show,其他的用v-if,减少系统的切换开销

         3).尽可能的细分组件,在项目开发过程之中,第一版本把所有的组件的布局写在一个组件中,当数据变更时,由于组件代码比较庞大,vuejs的数据驱动视图更新比较慢,造成渲染比较慢。造成比较差的体验效果。所以把组件细分,比如一个组件,可以把整个组件细分成轮播组件、列表组件、分页组件等。

         4).减少watch的数据,

    当组件某个数据变更后需要对应的state进行变更,就需要对另外的组件进行state进行变更。可以使用watch监听相应的数据变更并绑定事件。当watch的数据比较小,性能消耗不明显。当数据变大,系统会出现卡顿,所以减少watch的数据。其它不同组件的state双向绑定,可以采用事件中央总线或者vuex进行数据的变更操作。

        5).图片懒加载,对于内容类系统的图片按需加载,如果出现图片加载比较多,可以先使用v-lazy之类的懒加载库或者绑定鼠标的scroll事件,滚动到可视区域先再对数据进行加载显示,减少系统加载的数据。

        6).服务端渲染(可以查看官网vue ssr 指南)

    4.优化用户体验

        1).keep-alive使用,优化路由,减少请求次数

         2).better-click防止iphone点击延迟,手指触摸时会出现300ms的延迟效果,可以采用better-click对ipone系列的兼容体验优化

    编译优化

         在项目开发中,组件内容的改变,视图会进行实时的编译渲染(热重载),在大型项目开发中,有时候编译一次需要几十秒或者更多的时间,大大的降低了开发效率。下面贴一下,编译优化的方法:

     

    展开全文
  • 优化 Vue 项目编译文件大小

    千次阅读 2018-07-14 10:57:49
    转载自 优化 Vue 项目编译文件大小与其说是优化 Vue,不如说主要是在 webpack 打包的配置中做些文章,使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程,其中的内容也许并不适合于每个项目,...
  • 增加的情况下,编译耗时会越来越长,此种问题在vue的多页面开发中应该也是存在的。 需要一个优化方法来解决编译时间过长的问题,那么就会想到如果只是在有修改的html文档中去编译文件, 那么速度就会得到很大的...
  • vue性能优化

    2020-05-26 14:48:21
    将写好的vue项目部署到服务器上后首次加载,速度感人,这里记录下优化的方案 1、查找原因 在network中看到页面加载中有一个打包文件请求的时间非常长 资源请求耗时:从图里可以明显看到个别js文件请求耗时高达7秒 2...
  • vue项目优化

    2021-09-12 10:51:06
    vue项目的优化分为三部分: Vue 代码层面的优化 webpack 配置层面的优化 Web 技术层面的优化 一、代码层面的优化 1 v-for 遍历为 item 添加 key 在列表数据进行遍历渲染时,需要为每一项 item 设置唯一 key 值,...
  • Vue 项目优化

    2020-09-23 11:00:26
    它分了以下三个方面去优化Vue 项目 Vue 代码层面的优化; webpack 配置层面的优化; 基础的 Web 技术层面的优化。 一、 Vue 代码层面的优化 1.1、v-if 和 v-show 的使用场景 v-if 指令用于条件性地渲染一块内容,...
  • plugin 的消耗换种方式处理图片使用 DLLPlugin积极更新 webpack 版本http://www.hangge.com/blog/cache/detail_2105.html​www.hangge.comVue.js - 提高项目build打包速度(webpack构建性能优化技巧汇总)Vue.js -...
  • Vue 性能优化

    2021-03-16 14:54:48
    Vue 代码层面的优化; webpack 配置层面的优化; 基础的 Web 技术层面的优化。 一、代码层面的优化 1.1、v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子...
  • vue3原理与优化

    2021-08-12 14:21:22
    要深入了解可以自行搜索 效率优化 静态提升 元素节点 没有绑定动态内容 预字符串化 ...vue3不再使用Object.defineProperty的方式定义完成数据响应式,而是使用Proxy。 除了Proxy本身效率比Objec
  • VUE 性格优化

    2021-03-05 13:47:37
    一、vue-router路由懒加载 懒加载是当路由被访问的时候才加载对应组件,而不是在首页就全部加载,以此来提高首页反应速度。 方法和原理 require-ensure  说明: require.ensure在需要的时候才下载依赖的模块,当...
  • Vue项目优化

    2020-04-29 22:34:36
    vue打包上线移除 consols 方法1、 安装: npm install babel-plugin-transform-remove-console 然后配置在项目根目录下找 babel.config文件夹中找 再次运行 npm run build 命令,就不会有此类型的警告了 遇到的...
  • vue性能优化方案总结

    2021-03-29 23:02:45
    目前Vue虽然被广泛应用,但是其存在项目首屏优化,Webpack编译配置优化等问题,所以我们仍然需要去关注Vue项目性能方面的优化,使项目具有更高效的性能,更好的用户体验。 2.解决方案: 1.v-for与v-if避免同时...
  • Vue项目优化总结

    2020-04-29 19:56:07
    项目优化目录一、VS Code 配置eslint 进行格式化二、vue打包 移除console1、babel-plugin-transform-remove-console2、terser-webpack-plugin三、vue项目打包 开发环境和部署环境四、vue 项目打包 减小包的体积五、...
  • Vue性能优化

    千次阅读 2018-08-26 19:55:37
    在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。 性能瓶颈在哪里? 先看...
  • 前言上一篇我们讲到,webpack3.x 升级 4.x 后打包大小优化,今天讲一下 webpack 4.x(webpack 4.43.0) 的打包速度优化,其实在升级了 webpack4 之后对于打包速度就已经有了很大的提升,但是查找时间(缩小范围)、...
  • vue优化总结

    2020-09-18 19:04:17
    vue优化总结一、vue页面优化二、webpack优化 一、vue页面优化 1、路由懒加载 component: () => import('@/views/') 2、组件懒加载 const name=()=>import('@/XX.vue'); 3、图片懒加载 //1.CDN引用vue-lazy...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,299
精华内容 2,919
关键字:

vue3优化编译速度

vue 订阅