Vue 项目打包体积优化

是小张吖~

已于 2023-01-04 14:47:56 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js 前端

于 2023-01-04 14:46:27 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56272227/article/details/128200333

版权

一、按需引入UI组件库（不同的ui组件库有不同的处理方式）

1、借助babel-plugin-component，引入我们需要的组件，减少项目体积

import './plugins/element.js'

2、修改babel.config.js的内容

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

3、需要新建一个文件专门用于存放按需引入的组件，因为少量组件的话可以直接在main.js内引入，项目内的组件数量会不断增多，需要单独建个文件用于存放引入的组件

这里在src目录下新增了plugins文件夹，文件夹下的elemen.js文件用于存放按需引入的内容（文件名自定义）

// element.js 全文内容如下，按自己需要引入就好了
import Vue from 'vue'
import {
    Button,
    Form,
    FormItem,
    Input,
    Message,
    Container,
    Header,
    Aside,
    Main,
    Menu,
    Submenu,
    Me