前端面试题

Appearance

打包体积过大问题 ​

对于引入的第三方包，将代码整体打包会导致项目过大，可以采用如下方案：

  • 使用按需导入
  • 将第三方包拆分到单独的包中 / 将第三方包排除，使用cdn引入

TIP

将第三方包拆分到单独的包中：当项目重新部署，第三方包可以使用浏览器缓存(分割chunk：以获得更好的缓存)

将第三方包排除，使用cdn引入：不将第三方包打包到项目中，而是通过cdn引入

NOTE

在 vite 中可以使用 rollup-plugin-visualizer 或 vite-bundle-analyzer 来分析打包后的文件大小分布

方法1：将第三方包拆分到单独的包中 ​

在 vite.config.ts 中添加如下配置：

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: { 
    rollupOptions: { 
      output: { 
        manualChunks: { 
          xlsx: ['xlsx'], 
          echarts: ['echarts'], 
          lodash: ['lodash'] 
        } 
      } 
    } 
  } 
})

打包前后对比：

bash
vite v6.0.5 building for production...
✓ 622 modules transformed.
dist/index.html                     0.57 kB │ gzip:   0.34 kB
dist/assets/index-B2qwYvZR.css      0.21 kB │ gzip:   0.15 kB
dist/assets/index-h-Q5mpVa.js   1,570.33 kB │ gzip: 528.27 kB
bash
vite v6.0.5 building for production...
✓ 622 modules transformed.
Generated an empty chunk: "lodash".
dist/index.html                      0.72 kB │ gzip:   0.39 kB
dist/assets/index-B2qwYvZR.css       0.21 kB │ gzip:   0.15 kB
dist/assets/lodash-l0sNRNKZ.js       0.00 kB │ gzip:   0.02 kB
dist/assets/index-zAGOkqdL.js       96.65 kB │ gzip:  38.44 kB
dist/assets/xlsx-DH6CugJU.js       429.36 kB │ gzip: 143.24 kB
dist/assets/echarts-CUna7MuE.js  1,038.98 kB │ gzip: 345.33 kB

✓ built in 2.69s

可以看到其实打包完后的代码还是很大，代码分割（主要是用来将自己写的代码进行分割，实现动态加载，类似路由懒加载一样），第三方库主要还是排除第三方包，然后cdn引入的方式最好。

方法2：将第三方包排除，使用cdn引入 ​

步骤：

  1. 排除第三方包
  2. 引入CDN

1. 排除第三方包 ​

在 vite.config.ts 中添加如下配置：

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: { 
    rollupOptions: { 
      external: ['xlsx', 'echarts', 'lodash'], 
    } 
  } 
})

打包前后对比：

bash
vite v6.0.5 building for production...
✓ 622 modules transformed.
dist/index.html                     0.57 kB │ gzip:   0.34 kB
dist/assets/index-B2qwYvZR.css      0.21 kB │ gzip:   0.15 kB
dist/assets/index-h-Q5mpVa.js   1,570.33 kB │ gzip: 528.27 kB
bash
vite v6.0.5 building for production...
✓ 66 modules transformed.
dist/index.html                  0.57 kB │ gzip:  0.35 kB
dist/assets/index-B2qwYvZR.css   0.21 kB │ gzip:  0.15 kB
dist/assets/index-BPMgE9jy.js   96.62 kB │ gzip: 38.41 kB
✓ built in 432ms

这样就可以做到在打包后，将多余的代码删除，从而达到性能优化的目的。

注意

排除后的第三方包，项目中会找不到包，所以需要通过cdn引入后才能正常使用

2. 引入CDN ​

在 vite 中使用 vite-plugin-cdn-import 来导入cdn

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import importCDNPlugin from 'vite-plugin-cdn-import'

export default defineConfig({
  plugins: [
    vue(),
    importCDNPlugin({ 
      modules: [ 
        { 
           name: 'xlsx', 
           var: 'XLSX', 
           path: 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js'
        }, 
        { 
          name: 'echarts', 
          var: 'echarts', 
          path: 'https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js'
        }, 
        { 
          name: 'lodash', 
          var: '_', // lodash全局导出的符号
          path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'
        } 
      ] 
    }) 
  ],
  build: { 
    rollupOptions: { 
      external: ['xlsx', 'echarts', 'lodash'], 
    } 
  } 
})