精华内容
下载资源
问答
  • 主要介绍了Vue优化:常见会导致内存泄漏问题及优化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue 优化CDN加速的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 带有webpack = vue优化器安装的Rails视图将这一行添加到应用程序的Gemfile:gem'rails_vue_melt'然后执行:$ RailsVueMelt带有webpack = vue优化器安装的Rails视图将该行添加到应用程序的Gemfile:gem'rails_vue_...
  • 使用SVG参考为Vue优化的图标集 :rocket: 安装 npm i vue-feather-icon-set :woman::school: 用法 将IconLayer放在应用程序的顶部。 IconLayer必须是顶层的,高于任何图标的用法。 只要在使用任何图标之前就可以将...
  • vue 优化打包体积

    2020-07-03 13:52:48
    都是基于vuecli3.0的配置 在页面直接通过script标签引入项目所需的依赖 然后在webpack配置里 做下配置 配置 //webpack配置 configureWebpack: config => { // 打包忽略 config.externals = { 'vue':...

    都是基于vuecli3.0的配置

    在页面直接通过script标签引入项目所需的依赖

    然后在webpack配置里  做下配置 

     

    配置

    //webpack配置
      configureWebpack: config => {
          // 打包忽略
          config.externals = {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT'
            }
      }

    需要注意的是

    在每次修改完一次配置后,尽量重启一下服务 

    遇到过的问题

    在优化vue-router的时候  当配置好后   因为没有重启服务器,所以报$router不存下的错误

     

     

    以上代码仅仅是最基础的一个修改的展示  至于具体的优化项,因项而异了就

    展开全文
  • vue优化打包速度

    2020-08-28 11:45:32
    优化方向 优化压缩css,js,图片等能力能 多cpu运行,加快压缩速度 这里采用方法二 在不修改项目连接ip的情况下,第一次运行不是很快,第二次运行几秒就可以打开本地服务 第一:执行,安装以下包 npm install terser...

    优化方向

    1. 优化压缩css,js,图片等能力
    2. 多cpu运行,加快压缩速度

    这里采用方法二
    在不修改项目连接ip的情况下,第一次运行不是很快,第二次运行几秒就可以打开本地服务

    (若gitlab自打包可能存在,缓存报错,版本不兼容问题,1.可以注释base中plugins里面的插件。2.更新webpack)

    第一:执行,安装以下包

    npm install terser-webpack-plugin --save-dev
    npm install --save-dev speed-measure-webpack-plugin
    npm install --save-dev hard-source-webpack-plugin
    

    第二:在build文件夹中创建新 onDemand.js文件,

    /**
     * 按需引入webpackPlugin、loader
     */
    const TerserPlugin = require('terser-webpack-plugin');
    const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
    const os = require('os')
    const osNum = os.cpus().length / 2
    console.log('当前使用cpu数量:', osNum)
    
    const TerserWebpackPlugin = new TerserPlugin({
      cache: true,
      parallel: os.cpus().length / 2, // 根据运维要求,只是用一半数量
    })
    
    const smpWrap = new SpeedMeasurePlugin();
    
    const threadLoader = {
      workers: osNum
    }
    
    module.exports = {
      TerserWebpackPlugin,
      smpWrap,
      threadLoader
    }
    

    在这里插入图片描述

    第三: 修改webpack.base.conf.js 文件

    在这里插入图片描述
    在这里插入图片描述

    // 添加
    const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
    // 修改
    {
          test: /\.vue$/,
          use: [
            {
              loader: 'vue-loader',
              options: vueLoaderConfig
            }
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.js$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true
              }
            }
          ],
          include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
    // 修改
        {
          test: /\.(vue|js|jsx)$/,
          use: [
            'eslint-loader'
          ],
          exclude: /node_modules/,
          enforce: "pre" //vue-loader处理之前,进行预处理
        }
    // 添加
    plugins: [
        new HardSourceWebpackPlugin({
          cacheDirectory: 'node_modules/.cache/hard-source/[confighash]',
          recordsPath: 'node_modules/.cache/hard-source/[confighash]/records.json',
          configHash: function (webpackConfig) {
            // node-object-hash on npm can be used to build this.
            return require('node-object-hash')({ sort: false }).hash(webpackConfig);
          },
          environmentHash: {
            root: process.cwd(),
            directories: [],
            files: ['package-lock.json'],
          },
        })
      ],
    

    第四: 修改webpack.dev.conf.js文件

    const devWebpackConfig = merge(baseWebpackConfig, {
      module: {
        rules: utils.styleLoaders({  // 修改点
          sourceMap: config.dev.cssSourceMap,
          usePostCSS: true   // 修改点
        })
      },
      // cheap-module-eval-source-map is faster for development
      devtool: config.dev.devtool,
    
    展开全文
  • vue优化之骨架屏

    千次阅读 热门讨论 2019-07-01 10:13:29
    1. 什么是骨架屏 如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,...不建议: vue框架的原理是替换掉inde...

    1. 什么是骨架屏

    如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可让用户觉得内容正在加载即将呈现,体验更加流畅。实际应用比较广泛,CSDN,小米商城等很多大型网站都用到了骨架屏方案。

    2.如何实现

    • 不建议: vue框架的原理是替换掉index.html中id为app的div部分,如果加载内容多,这一部分渲染就会慢(如果也不采用按需加载),可以在body部分加入骨架屏需要的图片,但是并不优雅,修改不方便,如果骨架屏内容过多,在这里展示显然不合适,而且无法实现多页面骨架屏,因此不推荐这种
     <body>
         <img src="../static/img/skeleton_bg.jpg" style="width: 100%;height: 100%;position: absolute;left:0;top:0;right:0;bottom:0;margin: auto"/>
         <div id="app"></div>
      </body>
    
    • 建议:如何合理且优雅地实现骨架屏
    • 代码实现:
    1. 安装依赖
      • npm install vue-skeleton-webpack-plugin
    2. 在src目录下新建骨架屏页面Skeleton.vue、入口entry-skeleton.js

      entry-skeleton.js
      import Vue from 'vue'
      import Skeleton from './Skeleton'
      export default new Vue({
        components: {
          Skeleton
        },
        template: '<Skeleton />'
      })
      
      Skeleton.vue
      <!--骨架屏-->
      <template>
        <div class="skeleton">
          <img src="../static/img/skeleton_bg.jpg" />
        </div>
      </template>
      
      <script>
        export default {
          name: 'skeleton',
          methods: {
          }
        }
      </script>
      
      <style scoped>
      img{
        width: 100%;
        height: 100%;
        position: absolute;
        left:0;top:0;
        right:0;
        bottom:0;
        margin: auto
      }
      </style>
      
    3. 创建了骨架页面,不放到index里面也是不行的,因此在打包的时候做下面的处理,在build文件夹里新建文件webpack.skeleton.conf.js,目的是读取entry-skeleton,写入打包配置
      'use strict';
      const path = require('path')
      const merge = require('webpack-merge')
      const baseWebpackConfig = require('./webpack.base.conf')
      const nodeExternals = require('webpack-node-externals')
      
      const config = require('../config')
      const utils = require('./utils')
      const isProduction = process.env.NODE_ENV === 'production'
      const sourceMapEnabled = isProduction
        ? config.build.productionSourceMap
        : config.dev.cssSourceMap
      
      function resolve(dir) {
        return path.join(__dirname, dir)
      }
      
      let skeletonWebpackConfig = merge(baseWebpackConfig, {
        target: 'node',
        devtool: false,
        entry: {
          app: resolve('../src/entry-skeleton.js')
        },
        output: Object.assign({}, baseWebpackConfig.output, {
          libraryTarget: 'commonjs2'
        }),
        externals: nodeExternals({
          whitelist: /\.css$/
        }),
        plugins: []
      })
      
      //important: enable extract-text-webpack-plugin,让颜色生效
      // 重点配置
      skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
        sourceMap: sourceMapEnabled,
        extract: true
      })
      
      module.exports = skeletonWebpackConfig
      
    4. 打包,在webpack.prod.conf.js和webpack.dev.conf.js 的plugins部分,加入plugin
      new SkeletonWebpackPlugin({
           webpackConfig: require('./webpack.skeleton.conf'),
           quiet: true,
         }),
      
      运行一下,在加载页面时,有如下效果
      在这里插入图片描述

    点击加入群聊【小程序/HTML/WPF交流】,一起学习交流:663077768

    展开全文
  • 史上最全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 开发应用中,内存泄漏的问题会经常出现。这个问题在单页应用 (SPA) 中尤为重要,因为在 SPA 的设计中,用户使用它时是不需要刷新浏览器的,所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的...
  • 博主最近在写laravel+vue+element的一个项目,因为不是很了解webpack所以踩了不少坑,其中就有vue单文件过大问题,于是在这里记录下解决方法。 主要思路是分为两点。 减少webpack打包体积,将不用修改的库用cdn...
  • vue优化(打包、编译)

    千次阅读 2019-03-28 09:36:27
    关于vue打包和编译速度,在小型项目中可能体现的不明显,但是在中大型项目中,这是一个硬伤,会大大的降低开发速率。今天得空,就把我以前开发过程中总结的经验分享一下,其实也是自己结合前人的一些经验总结的。 ...
  • Vue.js轮播组件,经过优化可与Vue一起使用。 产品特点 可通过丰富的API和插件轻松进行自定义。 触摸,键盘,鼠标滚轮和导航支持。 两路控制轮播(同步)。 完整的RTL布局支持。 支持垂直滑动。 响应断点。 ...
  • vue优化打包速度与大小

    千次阅读 2018-05-10 17:46:42
  • 此过程是下载懒加载包,但是可能会出现权限错误,建议使用npm install vue-lazyload --save --no-optional 2.在main.js中导入包并注册(看截图) import VueLazyload from ‘vue-lazyload’ Vue.use(VueLazyload,...
  • keep-alive包裹的navtab切换组件不断切换导致页面卡顿以及浏览器内存过高 当这个navtab不断切换时,js heap size就会慢慢变高。 解决办法: 1:查找一下setTimeout定时器有没有清除 2:keep-alive缓存是否清除 ...
  • Vue性能优化的方法

    2020-10-15 01:00:17
    主要介绍了Vue性能优化的方法,文中讲解非常细致,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
  • vue做seo优化

    万次阅读 多人点赞 2019-09-03 11:02:37
    vue项目怎么做seo优化? prerender-spa-plugin怎么使用,以及它的工作原理 什么是seo? SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站...
  • vue项目优化

    2020-05-15 13:46:34
    1.vue-router优化 路由懒加载 因为在打包构建应用的时候,js包会特别大, 影响页面的加载速度,所以需要把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样比较高效。 是结合了...
  • vue项目打包优化.zip

    2021-05-02 20:57:46
    vue项目 优化 打包
  • webpack vue 打包优化

    千次阅读 2018-07-16 10:42:23
    webpack vue 打包优化 问题描述 在项目优化中,有一种方案,不经常更新的第三方包可以不打在 vendor.js 中,可以在 .html 模板中引入,然后在 webpack 中配置排除这些包,但是会遇到一个问题,就是开发环境中,...
  • Vue性能优化

    千次阅读 2018-08-26 19:55:37
    在最近开发的一个Hybrid APP里,Android Webview初始化一个较重的vue页面竟然用了1200ms ~ 1400ms,这让我开始重视vue的初始化性能,并最终优化到200 ~ 300ms,这篇文章分享我的优化思路。 性能瓶颈在哪里? 先看...
  • 浅谈vue加载优化策略

    2020-10-17 06:57:02
    主要介绍了浅谈vue加载优化策略,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue性能优化

    千次阅读 2018-10-08 17:09:45
    1.运行时优化 1.1引入生产环境vue文件 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句没有用,反而会增加应用的体积。有些警告检查还有一些小的运行时开销。 当使用 ...
  • 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据。下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,...
  • vue SEO优化

    2019-04-23 14:23:25
    第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html 第二,vue-meta-info,这个是针对单页面的meta SEO的另一种思路,参考...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,675
精华内容 25,870
关键字:

vue优化

vue 订阅