view ui 按需引入，项目体积没有减少。

Question

view ui 按需引入使用官网方法 和 csdn文章方法都不行， 全局引入和按需引入都占7.0兆资源，求解决办法。

https://blog.csdn.net/2501_90339150/article/details/145325557

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题是，使用 View UI 按需引入，但是项目体积并没有减少，反而占用了 7.0 兆资源。

可能的原因是，View UI 按需引入只是将组件的代码分割成多个文件，但是这些文件仍然会被打包到最终的 bundle 中。

解决方法可以尝试以下几点：

1. 使用 treeShaking：View UI 提供了 treeShaking 选项，可以将未使用的组件从 bundle 中剔除。可以在 vue.config.js 文件中添加以下配置：

module.exports = {
  // ...
  configureWebpack: {
    optimization: {
      usedExports: true
    }
  }
}

1. 使用 dll：可以使用 dll (Dynamic Link Library) 技术将 View UI 的组件打包到一个单独的文件中，然后在项目中引入这个文件。这样可以减少 bundle 的体积。

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new webpack.DllPlugin({
        path: path.join(__dirname, 'dll', 'view-ui.dll'),
        name: 'view-ui'
      })
    ]
  }
}

1. 使用 code splitting：可以使用 code splitting 技术将 View UI 的组件分割成多个文件，然后在项目中按需引入这些文件。这样可以减少 bundle 的体积。

import Vue from 'vue'
import { Button } from 'view-ui'

Vue.use(Button)

1. 优化图片资源：如果你的项目中使用了很多图片资源，可以尝试使用图片压缩工具或使用 webpack 的 image-webpack-loader 插件来压缩图片资源。

这些方法可以单独尝试，也可以组合使用以达到更好的效果。