从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载

// install
npm i image-webpack-loader -D
// vue.config.js
chainWebpack: (config) => {
    if (isProd) {
        // 图片压缩处理
        const imgRule = config.module.rule('images')
        imgRule
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()

./cwebp -q 75 login_plane_2.png -o login_plane_2.webp

<picture>
    <source srcset="hehe.webp" type="image/webp">
    <img src="hehe.png" alt="hehe>
</picture>

// main.js
window.addEventListener('DOMContentLoaded', () => {
    const isSupportWebP = document.createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') === 0
    document.documentElement.classList.add(isSupportWebP ? '' : '.no-support-webp');
// css
.support-webp .bg{
    background-image: url("hehe.webp");
.no-support-webp .bg {
    background-image: url("hehe.png");

// install
npm i svg-sprite-loader -D
// vue.config.js
chainWebpack: (config) => {
    // SVG处理
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons/svg'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      .end()

// src/icons/index.js
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
// main.js
import '@/icons'

// src/icons/index.js
import Vue from 'vue'
import CaSVG from '@/components/ca-svg'
Vue.component('ca-svg', CaSVG)
// src/components/ca-svg.vue
<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners" :style="svgStyle">
    <use :xlink:href="iconName" />
</template>
// name属性为必须字段，其他size或color可以自由定制

// install
npm i svgo-loader -D
// vue.config.js
// 接上面svg的配置
.end()
.use('svgo-loader')
.loader('svgo-loader')
.end()

// alias配置
resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons/antd-icon.js')
// src/icons/antd-icon.js
export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline'

// webpack plugins
plugins: [
  // Ignore all locale files of moment.js
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

// old
moment.tz('Asia/Shanghai').format('YYYYMMDDHHmmss')
// new
moment.utcOffset(480).format('YYYYMMDDHHmmss')

// vue.config.js
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
configureWebpack: {
    plugins: [
      new AntdDayjsWebpackPlugin({ preset: 'antdv3', replaceMoment: true })

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
      '@babel/preset-env',
        'useBuiltIns': 'usage', // entry，usage
        'corejs': 3
  plugins

optimization: isProd ? {
  splitChunks: {
    chunks: 'all',
    maxInitialRequests: Infinity, // 默认为3，调整为允许无限入口资源
    minSize: 20000, // 20K以下的依赖不做拆分
    cacheGroups: {
      vendors: {
        // 拆分依赖，避免单文件过大拖慢页面展示
        // 得益于HTTP2多路复用，不用太担心资源请求太多的问题
        name(module) {
          // 拆包
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
          // 进一步将Ant组件拆分出来,请根据情况来
          // const packageName = module.context.match(/[\\/]node_modules[\\/](?:ant-design-vue[\\/]es[\\/])?(.*?)([\\/]|$)/)[1]
          return `npm.${packageName.replace('@', '')}` // 部分服务器不允许URL带@
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial'
  runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }
} : {}

{
    path: 'register',
    name: 'register',
    component: () => import(/* webpackChunkName: "user" */ '@/views/user/register'),

// nginx.conf
listen 443 http2;

nginx -s stop && nginx

#开启和关闭gzip模式
gzip on;
#gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
# nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')
// gzip压缩处理
chainWebpack: (config) => {
    if(isProd) {
        config.plugin('compression-webpack-plugin')
            .use(new CompressionPlugin({
                test: /\.js$|\.html$|\.css$/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false // 不删除源文件

从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载

从龟速 11s 到闪电 1s，详解前端性能优化之首屏加载

背景

优化效果

关于性能优化

权衡取舍

指标和目标

目标

指标

调试工具

瓶颈分析

Network分析

Lighthouse分析

Performance分析

dist目录分析

Webpack Bundle分析

开始优化

体积优化

⚡排查并移除冗余依赖、静态资源

⚡构建时压缩图片

使用image-webpack-loader

⚡使用webP图片

转换为webP图片

页面中使用（兼容低版本）

⚡优化SVG图标

更优的SVG玩法

压缩优化

⚡优化Ant-design-vue体积

按需引入

删除冗余组件

⚡优化Ant-design-icon体积

重定向到本地来控制

⚡优化moment、moment-timezone体积

不打包moment时区文件

移除moment-timezone

使用dayjs替代moment

使用antd-dayjs-webpack-plugin[4]

⚡优化core-js体积

调整.browserslistrc

调整useBuiltIns

before：4.96M after：2.96M

传输优化

⚡优化分包策略

⚡优化路由懒加载

⚡开启HTTP2

Nginx开启HTTP2（>V1.95）

⚡Gzip压缩传输

Nginx配置Gzip

构建时生成gzip文件