每次一个小优化tip——打包性能优化

打包体积分析工具

webpack-bundle-analyzer

适配Webpack构建工具

使用方法：

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
module.exports={
  ...
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
  ],
  ...
}

rollup-plugin-visualizer

适配Vite构建工具

使用方法：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import { visualizer } from 'rollup-plugin-visualizer'
// import { readFileSync } from 'node:fs'

// https://vitejs.dev/config/
export default defineConfig({
  ...
  plugins: [
    vue(),
    VueDevTools(),
    VueSetupExtend(),
    visualizer({
      open: true,    //注意这里要设置为true，否则无效
      gzipSize: true,    // 收集 gzip 大小并将其显示
      brotliSize: true,    // 收集 brotli 大小并将其显示
      filename: 'buildStats.html'    //分析图生成的文件名
    })
  ],
  ...
})

框架代码CDN引入

一个公共的CDN：UNPKG

常规打包方式下，针对于框架相关的代码，例如 Vue、Vuex、Vue Router、Pinia、React 、Redux等等，都会一并压缩构建，这部分静态代码我们可以利用 script标签引入对应的CDN公共资源包在生产环境使用，且可以多个项目共享使用同一个CDN，从而减小项目打包构建后的体积。

利用 vite-plugin-cdn-import插件可以实现自动过滤对应依赖，并在html入口文件添加对应 script引入标签。

npm install vite-plugin-cdn-import --save-dev

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import { visualizer } from 'rollup-plugin-visualizer'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'

export default defineConfig({
  ...
  plugins: [
    vue(),
    VueDevTools(),
    VueSetupExtend(),
    visualizer({
      open: true,
      gzipSize: true,
      brotliSize: true,
      filename: 'buildStats.html'
    }),
    importToCDN({
      modules: [
        {
          name: 'vue',
          var: 'Vue',
          path: 'https://unpkg.com/vue@3.4.21/dist/vue.global.js'
        },
        {
          name: 'pinia',
          var: 'Pinia',
          path: 'https://unpkg.com/pinia@2.1.7/dist/pinia.iife.js'
        },
        {
          name: 'vue-router',
          var: 'Vue-Router',
          path: 'https://unpkg.com/vue-router@4.3.0/dist/vue-router.global.js'
        },
        {
          name: 'axios',
          var: 'Axios',
          path: 'https://unpkg.com/axios@1.6.8/dist/axios.min.js'
        }
      ]
    })
  ],
  ...
})

前后比对

意外问题&&解决

1.Uncaught ReferenceError: VueDemi is not defined

由于Pinia中有引入到VueDemi相关的依赖，需要另外使用CDN引入VueDemi

export default defineConfig({
  ...
  plugins: [
    ...
    importToCDN({
      modules: [
        autoComplete('vue'),
        {
          name: 'vue-router',
          var: 'VueRouter',
          path: 'https://unpkg.com/vue-router@4.3.0/dist/vue-router.global.prod.js'
        },
        {
          name: 'vue-demi',
          var: 'VueDemi',
          path: 'https://unpkg.com/vue-demi@0.14.7/lib/index.iife.js'
        },
        {
          name: 'pinia',
          var: 'Pinia',
          path: 'https://unpkg.com/pinia@2.1.7/dist/pinia.iife.js'
        },
      ]
    })
  ],
  ...
})

2.Uncaught TypeError: Cannot read properties of undefined (reading ' extend')

由于Ant-Design-Vue中有引入dayjs相关依赖，需要另外引入一系列dayjs相关依赖

    importToCDN({
      modules: [
        {
          name: 'dayjs',
          var: 'dayjs',
          path: [
            'https://unpkg.com/dayjs@1.11.10/dayjs.min.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/customParseFormat.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/weekday.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/localeData.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/weekOfYear.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/weekYear.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/advancedFormat.js',
            'https://unpkg.com/dayjs@1.11.10/plugin/quarterOfYear.js'
          ]
        },
        {
          name: 'ant-design-vue',
          var: 'antd',
          path: 'https://unpkg.com/ant-design-vue@4.1.2/dist/antd.min.js',
          css: 'https://unpkg.com/ant-design-vue@4.1.2/dist/reset.css'
        }
      ]
    })