vite构建优化，速度提升了73% & rollup拆包8.4M降低至1000kb

现状

1. 本地构建时间2m26s。
2. 首页加载的vendor.js大小8.4M。
3. 入口文件custom.js3.4M。

优化前

从以上看出，问题最大的是customs.js和vendor.js2个文件。尺寸太大。

通过rollup-plugin-visualizer插件分析，查看模块组成。

问题一、json静态资源使用import引入

①-⑬都是因为在组件中使用了import someJson from './asseets/some.json'，导致json文件被解析成js chunk.

// custom.js
import sortArea.json from './assets/sortArea.json';

导致custom.js包含sortArea.json的源文件。sortArea.json文件大小3.2M,直接让custom.js体积飙升。

其中①-⑫是其他场景下，需要引入的json文件。

改进方案

1. 将json文件放在public文件夹，并使用fetch(url)的方式加载

问题二、组件全局注册

全局注册的组件不会被Tree Shaking.参考 cn.vuejs.org/guide/compo…

改进方案

使用命名导出的方式，进行局部注册

<template>
    <div>
        <ArrowRight />
    </div>
</templat>
<script>
import { ArrowRight } from '@element-plus/icon-vue';
</script>

其他组件按相同方式处理。

问题三、rollupOptions.output.manualChunks 拆包不合理

优化前

rollupOptions: {
    output: {
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      manualChunks: (id) => {
        // 分包
        if (id.indexOf('node_modules') !== -1) {
          return 'vendor'; // 如果参与打包的模块含有node_modules里面的模块，那么就打包到vendor里面
        }
      }
    }
}

优化后

rollupOptions: {
    output: {
      chunkFileNames: 'static/js/[name]-[hash].js',
      entryFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      manualChunks: {
        vueChunk: ['vue', 'vue-router', 'pinia'],
        elementPlusChunk: ['element-plus','@element-plus/icons-vue'],
        customElementPlusChunk: ['@custom/icons-vue', '@custom/element-plus'],
        echartsChunk: ['echarts'],
        customChartsChunk: [ '@custom-charts/vue','@custom-charts/core'],
        utilsChunk: ['crypto-js','nprogress', 'axios', 'vue-i18n', 'dayjs'],
        statsChunk: ['@custom/stats-web']
      },
    }
}

优化后

1. 本地构建时间39s。
2. vendor.js拆分多个小文件。

优化措施

使用rollup-plugin-visualizer进行模块分析。

1. import * as xx from 'lib' 改成命名导入。
2. 静态资源(json文件)提取至public文件夹。
3. 删除app.component(name, component)全局组件注册，会导致全量构建。
4. build.rollupOptions.output.manualChunks 拆包优化。

优化结果

1. 减少模块体积。
2. json文件不参与构建，缩减构建时间，减少js文件体积。
3. 拆包后减少入口文件大小。

收益

从2min26s提升至39s，构建速度提升了73%。