前端性能优化实战 从 30s 到 2s - zptime/blog GitHub Wiki

// 安装命令：
npm install -g lighthouse

// 审查某个网页：
lighthouse https://www.imooc.com/

// 帮助查看
lighthouse --help

 //导出HTML格式
lighthouse https://www.imooc.com/  --output html

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

// 引入各种图表，图表后缀都为 Chart
import { BarChart, LineChart, PieChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,
} from "echarts/components";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
  BarChart,
  LineChart,
  PieChart,

  TitleComponent,
  TooltipComponent,
  ToolboxComponent,
  GridComponent,
  LegendComponent,
  AxisPointerComponent,
  DatasetComponent,

  SVGRenderer,
]);

export default echarts;

// 修改webpack.config.js文件
plugins: [
  // 排除i18n其他语言，仅加载中文 `moment/locale/zn-cn.js`
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn/),
];

// 安装依赖
npm install babel-plugin-ramda --save

// 配置babel.config.js文件
module.exports = {
  plugins: [
    // "ramda",
    // 或者
    ["ramda", { "useES" : true }]
  ],
};

// 安装依赖
npm install babel-plugin-import --save-dev

// 配置webpack.config.js文件
module.exports = {
  plugins: [
    [
      "import",
      // 默认js路径是[libraryName]/[moduleType]/[componentName]
      // 默认css路径是[libraryName]/[moduleType]/[componentName]/style
      {
          // 引入库名称，默认是ant-design-vue
        libraryName: "@ui/ant-design-vue",
        // 来源目录，默认是“es”
        libraryDirectory: "",
        // style：css-识别css文件；tree-识别less文件
        style: true,
        // // 自定义组件路径
        // customName: (name) => {
        //   return `ant-design-vue/${name.toLowerCase()}`
        // }
        // // 自定义组件库样式
        // style: (name) => {
        //  // name为组件所在的路径，按需加载样式配置提取对应组件名称的css即可
        //   return `@/ant-design-vue/${name}/style`
        // },
      },
    ],
  ],
};

// 配置后的实现
import { Button } from "@ui/ant-design-vue"
// 等价于
import "@ui/ant-design-vue/button/style/index.less"
import Button from "@ui/ant-design-vue/button/index.js"

module.exports = {
  alias: {
    "@ant-design/icons/lib/dist$": resolve("./utils/icons.js"),
  },
};

export { default as CalendarOutline } from "@ant-design/icons/lib/outline/CalendarOutline";

export { default as SettingOutline } from "@ant-design/icons/lib/outline/SettingOutline";
export { default as GithubOutline } from "@ant-design/icons/lib/outline/GithubOutline";
export { default as CopyrightOutline } from "@ant-design/icons/lib/outline/CopyrightOutline";

// 配置babel.config.js文件
module.exports = {
  plugins: [
    [
      "transform-imports",
      {
        quasar: {
          transform: require("quasar/dist/babel-transforms/imports.js"),
          preventFullImport: true,
        },
      },
    ],
  ],
};

// 配置webpack.config.js文件
const CompressionPlugin = require("compression-webpack-plugin");
module.exports = {
  plugins: [
    new CompressionPlugin({
      // filename: '[path].gz[query]', // 目标文件名
      algorithm: "gzip", // 使用gzip压缩
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$/, // 压缩文件类型
      threshold: 102400, // 对超过100k的数据压缩
      minRatio: 0.8, // 最小压缩比达到0.8时才会被压缩
    }),
  ],
};

module.exports = {
  optimization: {
    namedModules: true,
    namedChunks: true,
    runtimeChunk: {
      name: "runtime",
    },
    splitChunks: {
      name: false,
      chunks: "all", // all(全部)， async(异步的模块)，initial(同步的模块)
      minSize: 20000, // 表示文件大于1k的时候才对它进行打包
      minChunks: 2, // 当某个模块满足minChunks引用次数时，才会被打包。
      maxAsyncRequests: 5, // 在打包某个模块的时候，最多分成5个chunk，多余的会合到最后一个chunk中
      maxInitialRequests: Infinity,
      automaticNameDelimiter: "~", // 当vendors或者default中的filename不填时，打包出来的文件名就会带~
      cacheGroups: {
        default: false,
        vendors: {
          // 将从node_modules中引入的模块统一打包到common.js文件中
          name: "common",
          chunks: "all",
          minChunks: 2,
          test: /[\\/]node_modules[\\/]/,
        },
        styles: {
          // css统一打包到common.css文件中
          name: "common",
          chunks: "all",
          minChunks: 2,
          test: /\.(css|less|scss|stylus)$/,
          enforce: true,
          priority: 50,
        },
      },
    },
  },
};