# 打包优化

# 1、视图分析依赖文件

安装分析插件 npm install --save-dev rollup-plugin-visualizer

安装完成后，即可在 vite 下的插件属性中进行配置：

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  base: './',
  plugins: [
    vue(),
    visualizer({
      gzipSize: true,
      brotliSize: true,
      emitFile: false,
      filename: 'test.html', //分析图生成的文件名
      open: true, //如果存在本地服务端口，将在打包后自动展示
    }),
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

npm run build 之后就可以查看

# 2、第三方库 CDN 引入

安装插件 npm install vite-plugin-cdn-import --save-dev

import vitePluginCDN from 'vite-plugin-cdn-import';

export default {
  plugins: [
    vitePluginCDN({
      modules: [
        {
          name: 'react',
          var: 'React',
          path: `umd/react.production.min.js`,
        },
        {
          name: 'react-dom',
          var: 'ReactDOM',
          path: `umd/react-dom.production.min.js`,
        },
      ],
    }),
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

有一些 model 该插件还提供了自动完成：

import reactRefresh from '@vitejs/plugin-react-refresh';

export default {
  plugins: [
    importToCDN({
      modules: [autoComplete('react'), autoComplete('react-dom')],
    }),
    reactRefresh(),
  ],
};

1
2
3
4
5
6
7
8
9
10

写法如上，那么有那些是支持自动完成的呢，自动完成支持的 module

常见的 CND 库 UNPKG：https://unpkg.com jsDelivr ：https://www.jsdelivr.com

然后再配置 index.html 引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      type="image/svg+xml"
      href="./static/ico/favicon-a91524b8.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>xxxxxxxxx</title>
    <link
      href="https://unpkg.com/element-plus@2.2.17/dist/index.css"
      rel="stylesheet" />
    <link
      href="https://unpkg.com/bootstrap@5.2.1/dist/css/bootstrap.min.css"
      rel="stylesheet" />
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-plus@2.2.17/dist/index.full.js"></script>
    <script src="https://unpkg.com/vue-demi@0.13.11/lib/index.iife.js"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue@2.0.9/dist/index.iife.min.js"></script>
    <script src="https://unpkg.com/bootstrap@5.2.1/dist/js/bootstrap.js"></script>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 3、依赖文件分包

export default defineConfig({
  base,
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        // 入口文件名
        entryFileNames: 'assets/js/[name].js',
        // // 块文件名
        chunkFileNames: 'assets/js/[name]-[hash].js',
        // // 资源文件名 css 图片等等
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString();
          }
        },
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return id
        //       .toString()
        //       .split('node_modules/.pnpm/')[1]
        //       .split('/')[0]
        //       .toString()
        //   }
        // },
      },
    },
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 4、开启 gzip 压缩

安装插件 npm i vite-plugin-compression -D

import viteCompression from 'vite-plugin-compression';

export default defineConfig({
  base: './',
  plugins: [
    vue(),
    viteCompression({
      algorithm: 'gzip',
      threshold: 204800,
      verbose: false,
      deleteOriginFile: false,
    }),
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

最后服务器开启 gzip 就可以了

← 常见问题