vue优化笔记

优化

压缩

• cnpm install --save-dev image-webpack-loader compression-webpack-plugin
• vue.config.js 配置

const CompressionPlugin = require("compression-webpack-plugin")
chainWebpack: config => {
      // 解决ie11兼容ES6
      config.entry('main').add('babel-polyfill')
      // 开启图片压缩
      config.module.rule('images')
      .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      // 开启js、css压缩
      // if (process.env.NODE_ENV === 'production') {
        config.plugin('compressionPlugin')
        .use(new CompressionPlugin({
          test:/\.js$|\.html$|.\css/, // 匹配文件名
          threshold: 10240, // 对超过10k的数据压缩
          deleteOriginalAssets: false // 不删除源文件
        }))
      // }
    },

• nginx配置

 #开启gzip压缩
 gzip on;
 gzip_static on;
 gzip_min_length 1k;
 gzip_buffers 4 16k;
 gzip_comp_level 6;
 gzip_types text/plain application/javascript text/css applicatin/xml  text/javascript        application/x-httpd-php image/jpeg image/gif image/png;
 gzip_vary on;
 gzip_disable "MSIE [1-6]\.";

骨架屏

• cnpm install vue-skeleton-webpack-plugin
• Vue.config.js配置

const path = require('path')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin'); 
configureWebpack: config => {
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
              entry: {
                app: path.join(__dirname, './src/skeleton.js'),
              },
            },
            minimize: true,
            quiet: true,
          }));
    },

• 在根目录下（通常src）创建Skeleton.vue和skeleton.js

Skeleton.vue
  
<template>
  <div class="skeleton-wrapper">
    <section class="skeleton-block">
      <!-- eslint-disable vue/max-len -->
      <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
    </section>
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
};
</script>

<style scoped>
.skeleton-block {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background:#f7f7f7;
}
</style>

skeleton.js
import Vue from "vue";
import Skeleton from "./Skeleton.vue";

export default new Vue({
  components: {
    Skeleton
  },
  render: h => h(Skeleton)
});

构建mpa(多页应用)

• vue.config.js配置

 pages: {
      index: {
        entry: 'src/pages/index/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        title: 'index',
      },
      wechat: {
        entry: 'src/pages/wechat/main.js',
        template: 'public/wechat.html',
        filename: 'wechat.html',
        title: 'wechat',
      },
    },
 configureWebpack: config => {
        config.devServer = {
          historyApiFallback: {
            disableDotRule: true,
            verbose: true,
            rewrites: [
                { from: /^\/index\/.*$/, to: '/index.html'},
                {from: /^\/wechat\/.*$/, to: '/wechat.html'},
            ]
          }
        }
    },

开启cdn加速

购买第三方cdn加速文件

硬件提升

提升服务器性能和带宽