【前端优化】尝试给项目做一次瘦身按摩

按需引入

• Echart

// Echart升级为5.0（ps: 同步升级其他package，比如：echarts-liquidfill），并修改为按需引入
import * as echarts from "echarts/core";
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  MarkLineComponent
} from "echarts/components";
import { LineChart, PieChart, BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

• Moment.js的locale

// 1、IgnorePlugin -- 配置
const webpack = require('webpack');
chainWebpack: config => {
    // load `moment/locale/ko.js` and `moment/locale/zh-cn.js`
    config
        .plugin("ignore")
        .use(
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
    );
    // ...
}
// 引用时
const moment = require('moment');
require('moment/locale/zh-cn');
require('moment/locale/ko');
// moment.locale('zh-cn');

// 2、ContextReplacementPlugin -- 不需要再次引入
const webpack = require('webpack');
chainWebpack: config => {
  // load `moment/locale/ko.js` and `moment/locale/zh-cn.js`
  config
    .use(
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ko/)
    );
   // ...
}

• @ant-design/icons

// 新建文件 icons.js
export { default as DeleteOutline } from "@ant-design/icons/lib/outline/DeleteOutline";
export { default as DribbbleOutline } from "@ant-design/icons/lib/outline/DribbbleOutline";
export { default as DownOutline } from "@ant-design/icons/lib/outline/DownOutline";

// ant 组件用到 -- 也需要手动引入
export { default as CloseOutline } from "@ant-design/icons/lib/outline/CloseOutline";
export { default as LeftOutline } from "@ant-design/icons/lib/outline/LeftOutline";
export { default as RightOutline } from "@ant-design/icons/lib/outline/RightOutline";
export { default as UpOutline } from "@ant-design/icons/lib/outline/UpOutline";
export { default as CloseCircleFill } from "@ant-design/icons/lib/fill/CloseCircleFill";
export { default as LoadingOutline } from "@ant-design/icons/lib/outline/LoadingOutline";

// 配置别名 vue.config.js
configureWebpack: {
  resolve: {
    alias: {
      '@ant-design/icons/lib/dist$': path.resolve(__dirname, 'src/utils/icons.js')
    },
  }
  // ...
}

开启Gzip

• 项目配置

// vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

// ...
configureWebpack: {
  // ...
  plugins: [
    new CompressionWebpackPlugin({
      // filename: "[path].gz[query]",
      algorithm: "gzip",
      test: productionGzipExtensions,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
  // ...
}

• nginx配置

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}

lighthouse

可优化项目

存在的问题

• 预设图片高宽

<img src="@/assets/img/logo.png" alt="XXX" width="160" height="40" />

• 大内容渲染

// 是一张巨大的背景图片，压缩一下就好

做完这些，再来康康