精华内容
参与话题
问答
  • Vue 项目性能优化方案

    千次阅读 多人点赞 2019-08-23 10:00:33
    Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希.....

     

    前言

    Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来,希望读者读完本文,有一定的启发思考,从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成:

    • Vue 代码层面的优化;

    • webpack 配置层面的优化;

    • 基础的 Web 技术层面的优化。

     

    一、代码层面的优化

    1.1、v-if 和 v-show 区分使用场景

    v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    v-show 就简单得多, 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 display 属性进行切换。

    所以,v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;v-show 则适用于需要非常频繁切换条件的场景。

    1.2、computed 和 watch  区分使用场景

    computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed  的值;

    watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

    运用场景:

    • 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;

    • 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

    1.3、v-for 遍历必须为 item 添加 key,且避免同时使用 v-if

    (1)v-for 遍历必须为 item 添加 key

    在列表数据进行遍历渲染时,需要为每一项 item 设置唯一 key 值,方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时,新的状态值和旧的状态值对比,较快地定位到 diff 。

    (2)v-for 遍历避免同时使用 v-if

    v-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,必要情况下应该替换成 computed 属性。

    推荐:

    <ul>  <li    v-for="user in activeUsers"    :key="user.id">    {{ user.name }}  </li></ul>computed: {  activeUsers: function () {    return this.users.filter(function (user) {   return user.isActive    })  }}

    不推荐:

    <ul>  <li    v-for="user in users"    v-if="user.isActive"    :key="user.id">    {{ user.name }}  </li></ul>

    1.4、长列表性能优化

    Vue 会通过 Object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 Vue 来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 Vue 劫持我们的数据呢?可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。

    export default {  data: () => ({    users: {}  }),  async created() {    const users = await axios.get("/api/users");    this.users = Object.freeze(users);  }};

    1.5、事件的销毁

    Vue 组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。如果在 js 内

    created() {  addEventListener('click', this.click, false)},beforeDestroy() {  removeEventListener('click', this.click, false)}

    1.6、图片资源懒加载

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升,也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件:

    (1)安装插件

     

    npm install vue-lazyload --save-dev

    (2)在入口文件 man.js 中引入并使用

     

    import VueLazyload from 'vue-lazyload'

    然后再 vue 中直接使用

     

    Vue.use(VueLazyload)

    或者添加自定义选项

    Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})

    (3)在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ,从而将图片显示方式更改为懒加载显示:

     

    <img v-lazy="/static/img/1.png">

    以上为 vue-lazyload 插件的简单使用,如果要看插件的更多参数选项,可以查看 vue-lazyload 的 github 地址。

    1.7、路由懒加载

    Vue  是单页面应用,可能会有很多的路由引入 ,这样使用 webpcak 打包后的文件很大,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来。

    路由懒加载:

    const Foo = () => import('./Foo.vue')const router = new VueRouter({  routes: [    { path: '/foo', component: Foo }  ]})

    1.8、第三方插件的按需引入

    我们在项目中经常会需要引入第三方插件,如果我们直接引入整个插件,会导致项目的体积太大,我们可以借助 babel-plugin-component ,然后可以只引入需要的组件,以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例:

    (1)首先,安装 babel-plugin-component :

     

    npm install babel-plugin-component -D

    (2)然后,将 .babelrc 修改为:

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

    (3)在 main.js 中引入部分组件:

    import Vue from 'vue';import { Button, Select } from 'element-ui';
     Vue.use(Button) Vue.use(Select)

    1.9、优化无限列表性能

    如果你的应用存在非常长或者无限滚动的列表,那么需要采用 窗口化 的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建 dom 节点的时间。你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller  来优化这种无限列表的场景的。

    1.10、服务端渲染 SSR or 预渲染

    服务端渲染是指 Vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成,服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。

    (1)服务端渲染的优点:

    • 更好的 SEO:因为 SPA 页面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容,所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容;而 SSR 是直接由服务端返回已经渲染好的页面(数据已经包含在页面中),所以搜索引擎爬取工具可以抓取渲染好的页面;

    • 更快的内容到达时间(首屏加载更快):SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行页面的渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的时间;SSR 直接由服务端渲染好页面直接返回显示,无需等待下载 js 文件及再去渲染等,所以 SSR 有更快的内容到达时间;

    (2)服务端渲染的缺点:

    • 更多的开发条件限制:例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,这会导致一些外部扩展库需要特殊处理,才能在服务端渲染应用程序中运行;并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同,服务端渲染应用程序,需要处于 Node.js server 运行环境;

    • 更多的服务器负载:在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源,因此如果你预料在高流量环境下使用,请准备相应的服务器负载,并明智地采用缓存策略。

    如果你的项目的 SEO 和 首屏渲染是评价项目的关键指标,那么你的项目就需要服务端渲染来帮助你实现最佳的初始加载性能和 SEO,具体的 Vue SSR 如何实现,可以参考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 项目只需改善少数营销页面(例如  /, /about, /contact 等)的 SEO,那么你可能需要预渲染,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点,具体你可以使用 prerender-spa-plugin 就可以轻松地添加预渲染 。

     

    二、Webpack 层面的优化

    2.1、Webpack 对图片进行压缩

    在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理,对小于 limit 的图片转化为 base64 格式,其余的不做操作。所以对有些较大的图片资源,在请求资源的时候,加载会很慢,我们可以用 image-webpack-loader来压缩图片:

    (1)首先,安装 image-webpack-loader  :

    npm install image-webpack-loader --save-dev

    (2)然后,在 webpack.base.conf.js  中进行配置:

    {  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  use:[    {    loader: 'url-loader',    options: {      limit: 10000,      name: utils.assetsPath('img/[name].[hash:7].[ext]')      }    },    {      loader: 'image-webpack-loader',      options: {        bypassOnDebug: true,      }    }  ]}

    2.2、减少 ES6 转为 ES5 的冗余代码

    Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数,例如下面的 ES6 代码:

    class HelloWebpack extends Component{...}

    这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数:

     

    babel-runtime/helpers/createClass  // 用于实现 class 语法babel-runtime/helpers/inherits  // 用于实现 extends 语法

    在默认情况下, Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码,如果多个源代码文件都依赖这些辅助函数,那么这些辅助函数的代码将会出现很多次,造成代码冗余。为了不让这些辅助函数的代码重复出现,可以在依赖它们时通过 require('babel-runtime/helpers/createClass') 的方式导入,这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的,将相关辅助函数进行替换成导入语句,从而减小 babel 编译出来的代码的文件大小。

    (1)首先,安装 babel-plugin-transform-runtime :

     

    npm install babel-plugin-transform-runtime --save-dev

    (2)然后,修改 .babelrc  配置文件为:

    "plugins": [    "transform-runtime"]

    如果要看插件的更多详细内容,可以查看babel-plugin-transform-runtime 的 详细介绍。

    2.3、提取公共代码

    如果项目中没有去将每个页面的第三方库和公共模块提取出来,则项目会存在以下问题:

    • 相同的资源被重复加载,浪费用户的流量和服务器的成本。

    • 每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。

    所以我们需要将多个页面的公共代码抽离成单独的文件,来优化以上问题 。Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin,我们在项目中 CommonsChunkPlugin 的配置如下:

    // 所有在 package.json 里面依赖的包,都会被打包进 vendor.js 这个文件中。new webpack.optimize.CommonsChunkPlugin({  name: 'vendor',  minChunks: function(module, count) {    return (      module.resource &&      /\.js$/.test(module.resource) &&      module.resource.indexOf(        path.join(__dirname, '../node_modules')      ) === 0    );  }}),// 抽取出代码模块的映射关系new webpack.optimize.CommonsChunkPlugin({  name: 'manifest',  chunks: ['vendor']})

    如果要看插件的更多详细内容,可以查看 CommonsChunkPlugin 的 详细介绍。

    2.4、模板预编译

    当使用 DOM 内模板或 JavaScript 内的字符串模板时,模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了,但对性能敏感的应用还是最好避免这种用法。

    预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好,所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

    如果你使用 webpack,并且喜欢分离 JavaScript 和模板文件,你可以使用 vue-template-loader,它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

    2.5、提取组件的 CSS

    当使用单文件组件时,组件内的 CSS 会以 style 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销,如果你使用服务端渲染,这会导致一段 “无样式内容闪烁 (fouc) ” 。将所有组件的 CSS 提取到同一个文件可以避免这个问题,也会让 CSS 更好地进行压缩和缓存。

    查阅这个构建工具各自的文档来了解更多:

    • webpack + vue-loader ( vue-cli 的 webpack 模板已经预先配置好)

    • Browserify + vueify

    • Rollup + rollup-plugin-vue

    2.6、优化 SourceMap

    我们在项目进行打包后,会将开发中的多个文件代码打包到一个文件中,并且经过压缩、去掉多余的空格、babel编译化后,最终将编译得到的代码会用于线上环境,那么这样处理后的代码和源代码会有很大的差别,当有 bug的时候,我们只能定位到压缩处理后的代码位置,无法定位到开发环境中的代码,对于开发来说不好调式定位问题,因此 sourceMap 出现了,它就是为了解决不好调式代码问题的。

    SourceMap 的可选值如下(+ 号越多,代表速度越快,- 号越多,代表速度越慢, o 代表中等速度 )

    开发环境推荐:cheap-module-eval-source-map

    生产环境推荐:cheap-module-source-map

    原因如下:

    • cheap:源代码中的列信息是没有任何作用,因此我们打包后的文件不希望包含列相关信息,只有行信息能建立打包前后的依赖关系。因此不管是开发环境或生产环境,我们都希望添加 cheap 的基本类型来忽略打包前后的列信息;

    • module :不管是开发环境还是正式环境,我们都希望能定位到bug的源代码具体的位置,比如说某个 Vue 文件报错了,我们希望能定位到具体的 Vue 文件,因此我们也需要 module 配置;

    • soure-map :source-map 会为每一个打包后的模块生成独立的 soucemap 文件 ,因此我们需要增加source-map 属性;

    • eval-source-map:eval 打包代码的速度非常快,因为它不生成 map 文件,但是可以对 eval 组合使用 eval-source-map 使用会将 map 文件以 DataURL 的形式存在打包后的 js 文件中。在正式环境中不要使用 eval-source-map, 因为它会增加文件的大小,但是在开发环境中,可以试用下,因为他们打包的速度很快。

    2.7、构建结果输出分析

    Webpack 输出的代码可读性非常差而且文件非常大,让我们非常头疼。为了更简单、直观地分析输出结果,社区中出现了许多可视化分析工具。这些工具以图形的方式将结果更直观地展示出来,让我们快速了解问题所在。接下来讲解我们在 Vue 项目中用到的分析工具:webpack-bundle-analyzer 。

    我们在项目中 webpack.prod.conf.js 进行配置:

    if (config.build.bundleAnalyzerReport) {  var BundleAnalyzerPlugin =   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;  webpackConfig.plugins.push(new BundleAnalyzerPlugin());}

    执行  $ npm run build --report  后生成分析报告如下:

    2.8、Vue 项目的编译优化

    如果你的 Vue 项目使用 Webpack 编译,需要你喝一杯咖啡的时间,那么也许你需要对项目的 Webpack 配置进行优化,提高 Webpack 的构建效率。具体如何进行 Vue 项目的 Webpack 构建优化,可以参考作者的另一篇文章《 Vue 项目 Webpack 优化实践》

     

    三、基础的 Web 技术优化

    3.1、开启 gzip 压缩

    gzip 是 GNUzip 的缩写,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx,IIS 同样支持,gzip 压缩效率非常高,通常可以达到 70% 的压缩率,也就是说,如果你的网页有 30K,压缩之后就变成了 9K 左右

    以下我们以服务端使用我们熟悉的 express 为例,开启 gzip 非常简单,相关步骤如下:

    • 安装:

    npm install compression --save
    • 添加代码逻辑:

    var compression = require('compression');var app = express();app.use(compression())
    • 重启服务,观察网络面板里面的 response header,如果看到如下红圈里的字段则表明 gzip 开启成功 :

       

       

    3.2、浏览器缓存

    为了提高用户加载页面的速度,对静态资源进行缓存是非常必要的,根据是否需要重新向服务器发起请求来分类,将 HTTP 缓存规则分为两大类(强制缓存,对比缓存),如果对缓存机制还不是了解很清楚的,可以参考作者写的关于 HTTP 缓存的文章《深入理解HTTP缓存机制及原理》,这里不再赘述。

    3.3、CDN 的使用

    浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN 具有更好的可用性,更低的网络延迟和丢包率 。

    3.4、使用 Chrome Performance 查找性能瓶颈

    Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤如下。

    1. 打开 Chrome 开发者工具,切换到 Performance 面板

    2. 点击 Record 开始录制

    3. 刷新页面或展开某个节点

    4. 点击 Stop 停止录制

     

     

     

     

     

    展开全文
  • Vue项目前端性能优化

    千次阅读 2019-03-27 16:50:39
    一、vue-router路由懒加载 懒加载是当路由被访问的时候才加载对应组件,而不是在首页就全部加载,以此来提高首页反应速度。 方法和原理 require-ensure 说明: require.ensure在需要的时候才下载依赖的模块,当...

    一、vue-router路由懒加载

    懒加载是当路由被访问的时候才加载对应组件,而不是在首页就全部加载,以此来提高首页反应速度。

    • 方法和原理
    • require-ensure 
    • 说明: require.ensure在需要的时候才下载依赖的模块,当参数指定的模块都下载下来了(下载下来的模块还没执行),便执行参数指定的回调函数。require.ensure会创建一个chunk,且可以指定该chunk的名称,如果这个chunk名已经存在了,则将本次依赖的模块合并到已经存在的chunk中,最后这个chunk在webpack构建的时候会单独生成一个文件。
    • 语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String]) 
      • dependencies: 依赖的模块数组
      • callback: 回调函数,该函数调用时会传一个require参数
      • chunkName: 模块名,用于构建时生成文件时命名使用
    • 注意点:require.ensure的模块只会被下载下来,不会被执行,只有在回调函数使用require(模块名)后,这个模块才会被执行。

    示例:

    二、打包优化——工程文件打包的时候不生成.map文件

    npm run build编译之后,我们查看编译生成的文件,发现有很多.map文件,这些文件占了不小的空间。.map文件的作用是帮助编译后的代码调试,但是我们上线的代码已经调试完成,所以上线时可以不生成.map文件。

    修改配置文件如下即可:

    三、切换多入口模式

    在vue项目中,我们一般使用vue-cli脚手架搭建单页面的web工程。生成的项目结构如下图所示:

    main.js是整个单页面应用唯一的入口文件

    在大型项目中,单一入口无法满足项目需要,原因有以下两方面:

    (1)单一入口无法拆分按模块独立部署,不够灵活

    (2)单一入口负载过重,业务模块较多时,点击系统导航菜单频繁切换业务模块,在IE浏览器中,浏览器内存持续上涨,达到             1.5G以上卡顿,浏览器容易崩溃。

    基于以上两点原因,大型项目可以采用多入口的模式,好处有以下两点:

    (1)满足页面需要分开部署的场景

    (2)解决了页面卡顿和内存上涨问题

    配置方式参考我的单独讲解多入口配置的博文

    四、使用字体图标代替切图

    字体图标的优势:

    (1)字体图标任意缩放不会失真

    (2)在项目中导入后,以css样式引用,相较于传统的图片大大减少请求数量,优化性能

    (3)修改方便,如需要切换主题色可由css控制,避免视觉反复切图的工作量

    在线生成工具: https://icomoon.io/app/#/select

    五、使用雪碧图

    雪碧图的优点:

    1. 将多张图片合并到一张图片中,可以减小图片的总大小。
    2. 将多张图片合并成一张图片后,下载全部所需的资源,只需一次请求。可以减小建立连接的消耗。

    六、提取公共样式和方法

         1.复用的样式应当提取到公共的样式表中复用

    2.公共的方法应当提取到公共的js中复用

    3.表单验证的提取

    七、控件销毁

    1.页面切换释放:

    使用的C++控件应当及时销毁

    2. $destroy

    完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器。

     

    八、定时器销毁

    路由离开及时销毁定时器

     

    九、解绑事件

    路由离开及时解绑事件:

    vm.$off()

    十、vue中使用keep-alive

    vue2.0提供了一个keep-alive组件,用来缓存组件,避免多次加载相应的组件,减少性能消耗,但keep-alive是一把双刃剑,确实需要缓存组件的时候才使用。

    <keep-alive>

    <component>

      <!-- 组件将被缓存 -->

    </component>

    </keep-alive>

    十一、代码层面的优化

    1、v-show,v-if 用哪个?

    (1)只要涉及到权限相关的展示无疑要用 v-if

    (2)在没有权限限制时根据用户点击的频次选择,频繁切换的使用 v-show,不频繁切换的使用 v-if(减少页面中 dom 数量)

    2、不要在模板里面写过多的表达式与判断

      v-if="isShow && isAdmin && (a || b)",这种表达式虽说可以识别,但是不是长久之计,当看着不舒服时,适当的写到 methods 和 computed 里面封装成一个方法,这样的好处是方便我们在多处判断相同的表达式,其他权限相同的元素再判断展示的时候调用同一个方法即可。

    3、循环调用子组件时添加 key

      key 可以唯一标识一个循环个体,可以使用例如 item.id 作为 key,假如数组数据是这样的 ['a' , 'b', 'c', 'a'],使用 :key="item" 显然没有意义,更好的办法就是在循环的时候 (item, index) in arr,然后 :key="index"来确保key 的唯一性。不设置key值时vue会抛出警告。

    4、遵守编码规范

    语义化标签,避免乱嵌套,合理命名属性,使用高效简洁的css选择器等等

    5、合理利用vue生命周期

    减少在created生命周期中做ajax请求,而是放在mounted生命周期中,以不阻塞页面生成dom

    十二、iframe的内存释放

    相关资料称IEiframe元素的回收方面存在着bug,需要手动将其释放以避免内存泄漏

    释放方法:手动将iframe指向置空

     

    展开全文
  • 史上最全vue优化方案

    2020-06-19 09:43:45
    博主自家公司的vue项目已经上线将近一年了,最近一直在网上找优化方案,发现许多人写的比较笼统,今天特意整理了一些方案,供自己以后方便查看,也方便大家查看。 Vue框架的优点:Vue 框架通过数据双向绑定和虚拟 ...

    博主自家公司的vue项目已经上线将近一年了,最近一直在网上找优化方案,发现许多人写的比较笼统,今天特意整理了一些方案,供自己以后方便查看,也方便大家查看。

    Vue框架的优点:Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM

    Vue框架的不足: Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题,所以我们仍然需要去关注 Vue 项目性能方面的优化,使项目具有更高效的性能、更好的用户体验。

    项目优化主要分为三个大的方面:(一)Vue 代码层面的优化(二)webpack 配置层面的优化(三)基础的 Web 技术层面的优化。

    一、代码层面的优化

    1.1、v-if 和 v-show 区分使用场景
    v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    v-show 就简单得多, 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 display 属性进行切换。

    所以,v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景;v-show 则适用于需要非常频繁切换条件的场景。

    1.2、computed 和 watch 区分使用场景
    computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;

    watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;

    运用场景:

    当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;

    当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

    1.3、v-for 遍历必须为 item 添加 key,且避免同时使用 v-if
    (1)v-for 遍历必须为 item 添加 key

    在列表数据进行遍历渲染时,需要为每一项 item 设置唯一 key 值,方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时,新的状态值和旧的状态值对比,较快地定位到 diff 。

    (2)v-for 遍历避免同时使用 v-if

    v-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,必要情况下应该替换成 computed 属性。

    推荐:

    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    computed: {
      activeUsers: function () {
        return this.users.filter(function (user) {
       return user.isActive
        })
      }
    }
    

    不推荐:

    <ul>
      <li
        v-for="user in users"
        v-if="user.isActive"
        :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    

    1.4、长列表性能优化
    Vue 会通过 Object.defineProperty 对数据进行劫持,来实现视图响应数据的变化,然而有些时候我们的组件就是纯粹的数据展示,不会有任何改变,我们就不需要 Vue 来劫持我们的数据,在大量数据展示的情况下,这能够很明显的减少组件初始化的时间,那如何禁止 Vue 劫持我们的数据呢?可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。

    export default {
      data: () => ({
        users: {}
      }),
      async created() {
        const users = await axios.get("/api/users");
        this.users = Object.freeze(users);
      }
    };
    

    1.5、事件的销毁
    Vue 组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。如果在 js 内

    created() {
      addEventListener('click', this.click, false)
    },
    beforeDestroy() {
      removeEventListener('click', this.click, false)
    }
    

    1.6、图片资源懒加载
    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升,也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件:

    (1)安装插件

    npm install vue-lazyload --save-dev
    

    (2)在入口文件 man.js 中引入并使用

    import VueLazyload from 'vue-lazyload'
    

    然后再 vue 中直接使用

    Vue.use(VueLazyload)
    

    或者添加自定义选项

    Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: 'dist/error.png',
    loading: 'dist/loading.gif',
    attempt: 1
    })
    

    (3)在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ,从而将图片显示方式更改为懒加载显示:

    <img v-lazy="/static/img/1.png">
    

    以上为 vue-lazyload 插件的简单使用,如果要看插件的更多参数选项,可以查看 vue-lazyload 的 github 地址。

    1.7、路由懒加载
    Vue 是单页面应用,可能会有很多的路由引入 ,这样使用 webpcak 打包后的文件很大,当进入首页时,加载的资源过多,页面会出现白屏的情况,不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来。

    路由懒加载:

    const Foo = () => import('./Foo.vue')
    const router = new VueRouter({
      routes: [
        { path: '/foo', component: Foo }
      ]
    })
    

    1.8、第三方插件的按需引入
    我们在项目中经常会需要引入第三方插件,如果我们直接引入整个插件,会导致项目的体积太大,我们可以借助 babel-plugin-component ,然后可以只引入需要的组件,以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例:

    (1)首先,安装 babel-plugin-component :

    npm install babel-plugin-component -D
    

    (2)然后,将 .babelrc 修改为:

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

    (3)在 main.js 中引入部分组件:

    import Vue from 'vue';
    import { Button, Select } from 'element-ui';
    
     Vue.use(Button)
     Vue.use(Select)
    

    1.9、优化无限列表性能
    如果你的应用存在非常长或者无限滚动的列表,那么需要采用 窗口化 的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建 dom 节点的时间。你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的。

    1.10、服务端渲染 SSR or 预渲染
    服务端渲染是指 Vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成,服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。

    (1)服务端渲染的优点:

    更好的 SEO:因为 SPA 页面的内容是通过 Ajax 获取,而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容,所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容;而 SSR 是直接由服务端返回已经渲染好的页面(数据已经包含在页面中),所以搜索引擎爬取工具可以抓取渲染好的页面;

    更快的内容到达时间(首屏加载更快):SPA 会等待所有 Vue 编译后的 js 文件都下载完成后,才开始进行页面的渲染,文件下载等需要一定的时间等,所以首屏渲染需要一定的时间;SSR 直接由服务端渲染好页面直接返回显示,无需等待下载 js 文件及再去渲染等,所以 SSR 有更快的内容到达时间;

    (2)服务端渲染的缺点:

    更多的开发条件限制:例如服务端渲染只支持 beforCreate 和 created 两个钩子函数,这会导致一些外部扩展库需要特殊处理,才能在服务端渲染应用程序中运行;并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同,服务端渲染应用程序,需要处于 Node.js server 运行环境;

    更多的服务器负载:在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源,因此如果你预料在高流量环境下使用,请准备相应的服务器负载,并明智地采用缓存策略。

    如果你的项目的 SEO 和 首屏渲染是评价项目的关键指标,那么你的项目就需要服务端渲染来帮助你实现最佳的初始加载性能和 SEO,具体的 Vue SSR 如何实现,可以参考作者的另一篇文章《Vue SSR 踩坑之旅》。如果你的 Vue 项目只需改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点,具体你可以使用 prerender-spa-plugin 就可以轻松地添加预渲染 。

    二、Webpack 层面的优化

    2.1、Webpack 对图片进行压缩
    在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理,对小于 limit 的图片转化为 base64 格式,其余的不做操作。所以对有些较大的图片资源,在请求资源的时候,加载会很慢,我们可以用 image-webpack-loader来压缩图片:

    (1)首先,安装 image-webpack-loader :

    npm install image-webpack-loader --save-dev
    

    (2)然后,在 webpack.base.conf.js 中进行配置:

    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      use:[
        {
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
          }
        },
        {
          loader: 'image-webpack-loader',
          options: {
            bypassOnDebug: true,
          }
        }
      ]
    }
    

    2.2、减少 ES6 转为 ES5 的冗余代码
    Babel 插件会在将 ES6 代码转换成 ES5 代码时会注入一些辅助函数,例如下面的 ES6 代码:

    class HelloWebpack extends Component{…}
    这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数:

    babel-runtime/helpers/createClass  // 用于实现 class 语法
    babel-runtime/helpers/inherits  // 用于实现 extends 语法
    

    在默认情况下, Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码,如果多个源代码文件都依赖这些辅助函数,那么这些辅助函数的代码将会出现很多次,造成代码冗余。为了不让这些辅助函数的代码重复出现,可以在依赖它们时通过 require(‘babel-runtime/helpers/createClass’) 的方式导入,这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的,将相关辅助函数进行替换成导入语句,从而减小 babel 编译出来的代码的文件大小。

    (1)首先,安装 babel-plugin-transform-runtime :

    npm install babel-plugin-transform-runtime --save-dev
    

    (2)然后,修改 .babelrc 配置文件为:

    "plugins": [
        "transform-runtime"
    ]
    

    如果要看插件的更多详细内容,可以查看babel-plugin-transform-runtime 的 详细介绍。

    2.3、提取公共代码
    如果项目中没有去将每个页面的第三方库和公共模块提取出来,则项目会存在以下问题:

    (一)相同的资源被重复加载,浪费用户的流量和服务器的成本。

    (二)每个页面需要加载的资源太大,导致网页首屏加载缓慢,影响用户体验。

    所以我们需要将多个页面的公共代码抽离成单独的文件,来优化以上问题 。Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin,我们在项目中 CommonsChunkPlugin 的配置如下:

    // 所有在 package.json 里面依赖的包,都会被打包进 vendor.js 这个文件中。
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module, count) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        );
      }
    }),
    // 抽取出代码模块的映射关系
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })
    

    如果要看插件的更多详细内容,可以查看 CommonsChunkPlugin 的 详细介绍。

    2.4、模板预编译
    当使用 DOM 内模板或 JavaScript 内的字符串模板时,模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了,但对性能敏感的应用还是最好避免这种用法。

    预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好,所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

    如果你使用 webpack,并且喜欢分离 JavaScript 和模板文件,你可以使用 vue-template-loader,它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

    2.5、提取组件的 CSS
    当使用单文件组件时,组件内的 CSS 会以 style 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销,如果你使用服务端渲染,这会导致一段 “无样式内容闪烁 (fouc) ” 。将所有组件的 CSS 提取到同一个文件可以避免这个问题,也会让 CSS 更好地进行压缩和缓存。

    查阅这个构建工具各自的文档来了解更多:

    webpack + vue-loader ( vue-cli 的 webpack 模板已经预先配置好)

    Browserify + vueify

    Rollup + rollup-plugin-vue

    2.6、优化 SourceMap
    我们在项目进行打包后,会将开发中的多个文件代码打包到一个文件中,并且经过压缩、去掉多余的空格、babel编译化后,最终将编译得到的代码会用于线上环境,那么这样处理后的代码和源代码会有很大的差别,当有 bug的时候,我们只能定位到压缩处理后的代码位置,无法定位到开发环境中的代码,对于开发来说不好调式定位问题,因此 sourceMap 出现了,它就是为了解决不好调式代码问题的。

    SourceMap 的可选值如下(+ 号越多,代表速度越快,- 号越多,代表速度越慢, o 代表中等速度 )

    开发环境推荐:cheap-module-eval-source-map

    生产环境推荐:cheap-module-source-map

    原因如下:

    cheap:源代码中的列信息是没有任何作用,因此我们打包后的文件不希望包含列相关信息,只有行信息能建立打包前后的依赖关系。因此不管是开发环境或生产环境,我们都希望添加 cheap 的基本类型来忽略打包前后的列信息;

    module :不管是开发环境还是正式环境,我们都希望能定位到bug的源代码具体的位置,比如说某个 Vue 文件报错了,我们希望能定位到具体的 Vue 文件,因此我们也需要 module 配置;

    soure-map :source-map 会为每一个打包后的模块生成独立的 soucemap 文件 ,因此我们需要增加source-map 属性;

    eval-source-map:eval 打包代码的速度非常快,因为它不生成 map 文件,但是可以对 eval 组合使用 eval-source-map 使用会将 map 文件以 DataURL 的形式存在打包后的 js 文件中。在正式环境中不要使用 eval-source-map, 因为它会增加文件的大小,但是在开发环境中,可以试用下,因为他们打包的速度很快。

    2.7、构建结果输出分析
    Webpack 输出的代码可读性非常差而且文件非常大,让我们非常头疼。为了更简单、直观地分析输出结果,社区中出现了许多可视化分析工具。这些工具以图形的方式将结果更直观地展示出来,让我们快速了解问题所在。接下来讲解我们在 Vue 项目中用到的分析工具:webpack-bundle-analyzer 。

    我们在项目中 webpack.prod.conf.js 进行配置:

    if (config.build.bundleAnalyzerReport) {
      var BundleAnalyzerPlugin =   require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
      webpackConfig.plugins.push(new BundleAnalyzerPlugin());
    }
    

    2.8、Vue 项目的编译优化
    如果你的 Vue 项目使用 Webpack 编译,需要你喝一杯咖啡的时间,那么也许你需要对项目的 Webpack 配置进行优化,提高 Webpack 的构建效率。具体如何进行 Vue 项目的 Webpack 构建优化,可以参考作者的另一篇文章《 Vue 项目 Webpack 优化实践》

    三、基础的 Web 技术优化

    3.1、开启 gzip 压缩
    gzip 是 GNUzip 的缩写,最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术,web 服务器和客户端(浏览器)必须共同支持 gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如 Apache,Nginx,IIS 同样支持,gzip 压缩效率非常高,通常可以达到 70% 的压缩率,也就是说,如果你的网页有 30K,压缩之后就变成了 9K 左右

    以下我们以服务端使用我们熟悉的 express 为例,开启 gzip 非常简单,相关步骤如下:

    安装:

    npm install compression --save
    

    添加代码逻辑:

    var compression = require('compression');
    var app = express();
    app.use(compression())
    

    重启服务,观察网络面板里面的 response header

    3.2、浏览器缓存
    为了提高用户加载页面的速度,对静态资源进行缓存是非常必要的,根据是否需要重新向服务器发起请求来分类,将 HTTP 缓存规则分为两大类(强制缓存,对比缓存),如果对缓存机制还不是了解很清楚的,可以参考作者写的关于 HTTP 缓存的文章《深入理解HTTP缓存机制及原理》,这里不再赘述。

    3.3、CDN 的使用
    浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而 CDN 可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN 具有更好的可用性,更低的网络延迟和丢包率 。

    3.4、使用 Chrome Performance 查找性能瓶颈
    Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤如下。

    打开 Chrome 开发者工具,切换到 Performance 面板

    点击 Record 开始录制

    刷新页面或展开某个节点

    展开全文
  • Vue首页加载速度优化

    万次阅读 2018-08-14 16:54:34
    Vue首页加载速度优化 问题描述 最近在搭建自己的博客,前端采用Vue技术,发现首页加载速度非常之慢,常常达到10S左右。虽然作为一个Java开发者,对前端技术不是特别了解,但是也实在无法忍受如此之慢的打开网页...

    Vue首页加载速度优化

    问题描述

    最近在搭建自己的博客,前端采用Vue技术,发现首页加载速度非常之慢,常常达到10S左右。虽然作为一个Java开发者,对前端技术不是特别了解,但是也实在无法忍受如此之慢的打开网页速度,遂开始优化之旅。

    寻找原因


    游览器的分析结果:vendor.xxxxx.js体积过于庞大,此文件为第三方插件库。

    查找打包数据,发现该文件在打包时变提示体积过大【big】

     解决方案一

    加入GZIP打包,首先安装gzip
    npm install -save gzip

    在webpack.prod.conf.js加入如下代码

    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
        })
      )
    }
    
    


    在index.js中加入如下代码

    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],


    加入后重新打包进行测试,结果如图:

    发现该文件体积大小减少100KB,然而加载速度还是慢。


    解决方案二


    方案一不能完美解决问题,又必须缩小该文件体积,方案二便是利用CND,直接外链第三方库,传统的HTML文件利用CDN不外乎在文件头部加入script连接,Vue也不例外。
    首先在index.html加入需要引入的库:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
       
        <title>my-blog</title>
      </head>
      <body>
        
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> 
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
          new Vue({
            el: '#app',
           
          })
        </script>
        <div id="app">    
       </div>
      </body>
    </html>
    
    



    然后在webpack.base.conf.js中加入externals
     

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals: {
        'jquery': 'jQuery',
        'element-ui':'ELEMENT',
        'vue': 'Vue'
      },
    ......


    在main.js中删除相应的Import和USE,重新打包,我们看到大小编程了288KB,这是由于没有把所有的依赖删完,因为有的依赖找不到相应CND站点

    这时候加载时间降到了2S多,作为一个访问量不高的博客,在服务器为阿里云学生垃圾服务器的情况下,这个时间应该是可以接受了。

     总结


    项目在优化的足够好的时候,网页是足以秒开的,在低并发情况下,制约网页速度的往往是前端工程。

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

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

    千次阅读 2018-12-04 09:40:51
    Vue 在渲染组件的过程中能自动追踪数据的依赖,并精确知晓数据更新的时候哪个组件需要重新渲染,渲染之后也会经过虚拟 DOM diff 之后才会真正更新到 DOM 上,Vue 应用的开发者一般不需要做额外的优化工作。...
  • 总结一下使用Vue涉及到的性能优化方法,从我实践和查阅资源总结出来的集合。 简介: v-if 和 v-show v-if v-show computed 和 watch 一、 v-if 和 v-show 一般使用过vue或者angular及其相同框架的人都会知道...
  • vue优化笔记

    2020-11-22 18:07:11
    优化 压缩 cnpm install --save-dev image-webpack-loader compression-webpack-plugin vue.config.js 配置 const CompressionPlugin = require("compression-webpack-plugin") chainWebpack: config => { // ...
  • 关于vue的seo优化

    千次阅读 热门讨论 2019-06-18 22:02:18
    最近公司的项目中有一个非常重要的功能就是seo的优化,这个东西堵了一段时间,中间还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就...
  • vue性能优化

    千次阅读 2019-03-30 09:33:35
    标记组件为 functional,这意味它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。
  • 浅谈 Vue 项目优化

    万次阅读 2017-06-20 09:37:04
    前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据。下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的...
  • Vue性能优化

    千次阅读 2018-08-26 19:55:37
    在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。 性能瓶颈在哪里? 先看...
  • 开发时重点放在具体功能需求的实现上面,完成需求之后在进行优化,比如cdn优化, 首先配置不同的入口: 在根目录下新建vue.config…js 文件 module.exports = { chainWebpack: (config) => { // 发布模式 config....
  • Vue项目优化,减小打包体积

    千次阅读 2019-01-18 14:13:07
    使用Vue-cli脚手架搭建项目Vue的话(这里说明一下,我用的是脚手架2.x),看这里 1.使用路由懒加载 原理,让文件按需加载,使用的时候再加载出来 在路由文件导出的对象加入下面这种格式 export default new VueRouter...
  • 用户在访问网站时,加载时间超过8秒就会感到不耐烦,我自己尝试了很多个时间段,感觉2-4秒是比较舒服的(而且还能给人一种哇这个网站好高级的样子啊好快啊优化也太下功夫了叭 的错觉)。 经过我的虚心求教 (不耻下问)...
  • 1. 为什么使用CDN 使用CDN主要解决两个问题: 打包时间太长、打包后代码体积太大,请求慢 服务器网络不稳带宽不高,使用cdn可以回避服务器带宽问题 2. 具体步骤 在/index.html中引入CDN ... ...
  • 我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu。大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vend...
  • vue项目性能优化方案

    2020-10-17 15:44:43
    项目采用vue cli3搭建,集成前端组件以及地图效果,导致项目打包后资源包文件特别大,打包速度慢,首屏渲染耗时长,甚至出现左右界面图表数据不渲染的问题。 优化前准备: 首先我们需要先排查影响性能、导致打包资源...
  • Vue项目优化 打包

    2020-02-23 19:57:01
    项目优化 nprogess 进度条 基于网络请求 拦截器添加 进度条 eslint 检查提示警告信息 去除console 日志插件 生成打包报告 vue-cli-service build --report Vue UI build 分析报告 vue.config.js webpack 的默认...
  • 在终端中输入 vue ui ... 方法1.在main.js中按需引入,如下图中所示 方法2....通过cdn中优化的库或者插件,在main.js中就不需要通过important引入了 只需要在使用时引入 vue.config.js 链接. 提取码.
  • Vue项目常用优化方案

    2020-09-14 15:01:06
    工作中使用Vue+ElementUI开发后台管理项目 天天跟数据打交道,学到的东西真不多,工作又不好找,emmm,先来说说工作中用到的优化方法吧! 1、路由懒加载 例:const Login = ()=> import('../../Login/Login') 2...
  • VUE项目优化

    2020-04-29 22:23:19
    vue项目开发完成后,将面临上线的问题。 既然要上线,那么速度之类的自然需要优化,以下是项目优化的过程: 开发时期会将’@vue/standard’注释,否则会因为格式问题报很多错, 当项目需要上线的时候自然是要取消...
  • 项目优化是我们前端开发人员必备的技能,本文以Vue项目为例,详细阐述优化的过程,看看如何使文件大小从3.19MB缩小到684KB,同时欢迎大家提出自己的优化方案。 项目技术栈阐述 本项目采用Vue前端框架、ElementUI...
  • 项目代码中的js,css,svg,ico文件进行gzip压缩,在vue-cli脚手架的配置信息中,有对代码进行压缩的配置项,例如index.js的通用配置,productionGzip设置为true,但是首先需要对compress-webpack-plugin支持 ...
  • vue项目的webpack构建优化

    千次阅读 2018-02-06 18:42:38
    vue项目的webpack构建优化 值得一提的是,在说webpack的速度优化之前,按需加载和按需引入,是你先要做好的,之后再说速度优化的问题。 按需加载,参考:https://segmentfault.com/a/1190000011519350 对参考博客...
  • vue 项目打包速度优化(1)

    千次阅读 2019-05-21 23:59:26
    devtool选项个人开发环境配置,cli推荐开发环境配置,cli推荐生产环境配置,可以看到不同配置会对项目的打包速度造成一定程度的影响。随着项目越来越大,差异也就更加明显。生产环境需要精准的sourcemap不建议修改...
  • 1. 合理使用v-if和v-show v-if是真正的条件渲染,他的渲染机制是,直到第一次满足条件才会被渲染,条件不满足后又进行销毁。 v-show 则不管满不满足条件,都会被渲染,显示与否只是切换dom的display属性。...
  • 本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue项目打包后体积优化 背景 这段时间使用Vue+Typescript完成了对公司用户管理系统的重构,替换掉了之前的JSF实现了准前后端分离。 目前还没有采取前端独立部署的模式,前端文件打包后需要放到tomcat中进行访问。 ...
  • v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建; 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真...

空空如也

1 2 3 4 5 ... 20
收藏数 45,776
精华内容 18,310
关键字:

vue优化

vue 订阅