Solve the problem that the dist folder is too large after Vue is packaged

Leave a Comment / 05/06/2022 /

1. Do not generate a sorce map file

Set productionSourceMap to false in vue.config.js

When this option is turned off, the packaged file will be twice as small

2. If the component library is referenced, set the on-demand reference

If your project references the component library, the development environment can be imported without thinking, and the production environment must be set to reference on demand!

By the way, record the pit I stepped on

Here is Tencent’s TDesign as an example

  1. Install TDesign

     npm i tdesign-vue-next

  2. On-demand citation using plugins

     npm install -D unplugin-vue-components unplugin-auto-import

    Then add the above plugins to the configuration file corresponding to Webpack or Vite.

    Vite

     import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { TDesignResolver } from 'unplugin-vue-components/resolvers'; export default { plugins: [ // ... AutoImport({ resolvers: [TDesignResolver({ library: 'vue-next' })], }), Components({ resolvers: [TDesignResolver({ library: 'vue-next' })], }), ], };

    Webpack

     const AutoImport = require('unplugin-auto-import/webpack'); const Components = require('unplugin-vue-components/webpack'); const { TDesignResolver } = require('unplugin-vue-components/resolvers'); module.exports = { // ... plugins: [ AutoImport({ resolvers: [TDesignResolver({ library: 'vue-next' })], }), Components({ resolvers: [TDesignResolver({ library: 'vue-next' })], }), ], };

Note : The vue project built using the vue-cli 4.x version is different from the previous build. We need to create a vue.config.js file in the root directory for webpack-related configuration.

Example:

 const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { TDesignResolver } = require('unplugin-vue-components/resolvers') module.exports = { // TDesign 按需引用configureWebpack: { plugins: [ AutoImport({ resolvers: [TDesignResolver({ library: 'vue-next' })] }), Components({ resolvers: [TDesignResolver({ library: 'vue-next' })] }) ] } }

You need to write webpack related content in configureWebpack! (This is also the pit I stepped on)

After the on-demand reference is set, the import of the component library can be omitted in main.js, but the CSS of the component library still needs to be imported.

After the on-demand reference is set, the packaged file will be much smaller

This article is reprinted from https://www.xxhzm.cn/index.php/archives/659/
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment