According to the need to introduce

  • Echart

// Update Echart to 5.0 (ps: update other packages, such as echarts-Liquidfill) and change to import on demand
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";
Copy the code

  • My Moment. Js locale

// 1. IgnorePlugin -- configuration
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$/));// ...
}
/ / reference
const moment = require('moment');
require('moment/locale/zh-cn');
require('moment/locale/ko');
// moment.locale('zh-cn');

// 2. ContextReplacementPlugin -- no need to be reintroduced
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/));// ...
}
Copy the code

  • @ant-design/icons

// Create a new file called 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 components are used -- also manually imported
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";

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

Copy the code

Open the Gzip

  • Project configuration

// 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})]// ...
}
Copy the code

  • Nginx configuration

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]\.";
}
Copy the code

lighthouse

Optimizable item

Existing problems

  • Preset image height and width

<img src="@/assets/img/logo.png" alt="XXX" width="160" height="40" />
Copy the code
  • Large content rendering

// This is a huge background image, just compress it
Copy the code

After that, come kangkang