版權(quán)聲明：本文為博主原創(chuàng)文章夭苗，轉(zhuǎn)載請附上原文出處鏈接和本聲明刁赦。
本文鏈接：https://yotrolz.com/posts/97624e89/

前言

使用nuxt+element-UI開發(fā)的項(xiàng)目，在進(jìn)行打包的時(shí)候打包提示vendor.xxxxx.js文件過大的警告煮剧，所以需要進(jìn)行優(yōu)化

打包分析

nuxt配置打包分析

說明：

Nuxt.js 使用webpack-bundle-analyzer分析并可視化構(gòu)建后的打包文件斥滤，你可以基于分析結(jié)果來決定如何優(yōu)化它将鸵。

配置：

在nuxt.config.js文件中進(jìn)行配置，具體配置如下：

module.exports = {
  build: {
    analyze: true
    // or
    analyze: {
      analyzerMode: 'static'
    }
  }
}

• 具體可參考官網(wǎng)配置說明https://zh.nuxtjs.org/api/configuration-build#analyze

使用：

可通過 nuxt build --analyze 或 nuxt build -a 命令來啟用該分析器進(jìn)行編譯構(gòu)建

分析結(jié)果：

nuxt build --analyze分析結(jié)果

優(yōu)化前

按照上面的配置后我們可以看到分析結(jié)果佑颇，如下圖：

優(yōu)化前

優(yōu)化后

優(yōu)化方案

由于項(xiàng)目中并沒有用到element-UI中的全部組件一喘，所以我們的優(yōu)化方案就是只引入我們使用的組件及樣式；

優(yōu)化步驟

本地安裝按需加載插件babel-plugin-component（已安裝的忽略次步驟）

npm install babel-plugin-component -D

配置nuxt.config.js

// nuxt.config.js

build: {
  ...other
  // 按需引入element-ui
  babel: {
    plugins: [
      [ "component", 
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ] 
    ] 
  },
},

修改plugins/element-ui.js

// plugins/element-ui.js

import Vue from 'vue'
import locale from 'element-ui/lib/locale/lang/en'

// 全局引用
// import Element from 'element-ui'

// 按需引用
import { Button, Input } from 'element-ui'

// 自定義主題樣式(這里我們會(huì)在這個(gè)文件內(nèi)引入我們所需的組件的樣式)
import '../assets/stylesheets/element-variables.scss'

// Vue.use(Element, { locale })

// 按需使用
Vue.use(Button, { locale })
Vue.use(Input, { locale })

修改element-variables.scss

// element-variables.scss

/* 改變主題色變量 */
$--color-primary: teal;

/* 改變 icon 字體路徑變量嗜暴，必需 */
$--font-path: '../../node_modules/element-ui/lib/ theme-chalk/fonts';

/* 樣式--全局引入 */
// @import "~element-ui/packages/theme-chalk/src/index";

/* 樣式--按需引入 */
@import "../../node_modules/element-ui/packages/theme-chalk/src/button";
@import "../../node_modules/element-ui/packages/theme-chalk/src/input";

優(yōu)化結(jié)果

優(yōu)化結(jié)果