webpack编译优化-(lodash、echarts、element-plus、vxe-table等)vue3版本

辅助工具

webpack-bundle-analyzer [包分析]

    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
      .end()

speed-measure-webpack-plugin[速度分析]

• vue.config.js

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');

chainWebpack: (config) => {
  config.plugin('speed')
    .use(SpeedMeasureWebpackPlugin)
}

shell: vue inspect [用于检查webpack配置]

> vue inspect --help
Usage: vue inspect [options] [paths...]

inspect the webpack config in a project with vue-cli-service

Options:
  --mode <mode>
  --rule <ruleName>      inspect a specific module rule
  --plugin <pluginName>  inspect a specific plugin
  --rules                list all module rule names
  --plugins              list all plugin names
  -v --verbose           Show full function definitions in output
  -h, --help             display help for command

按需加载

lodash

// 按需加载
import { random } from 'lodash/random'
// 一些方法无法使用上述引入时，可尝试下面这种方式引入
// import { debounce} from 'lodash/function'

//错误
import { random } from 'lodash'

echarts

• 新建一个echarts.js，用于取代 “ import * as echarts from ‘echarts’;”

import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/radar';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/gauge';


import 'echarts/lib/component/aria';
import 'echarts/lib/component/grid';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/dataZoom';


export default echarts;

element-plus

unplugin-element-plus
element plus 自动按需引入
element-plus 自动引入修改主题色

vxe-table

• 新建 vxe-table/component.js

import XEUtils from 'xe-utils';
import { setup } from 'vxe-table/es/v-x-e-table';
import { Icon } from 'vxe-table/es/icon';
// import { Menu } from 'vxe-table/es/menu';
// import { Edit } from 'vxe-table/es/edit';
import { Filter } from 'vxe-table/es/filter';
import { Export } from 'vxe-table/es/export';
import { Keyboard } from 'vxe-table/es/keyboard';
import { Validator } from 'vxe-table/es/validator';
import { Header } from 'vxe-table/es/header';
import { Footer } from 'vxe-table/es/footer';
import { Column } from 'vxe-table/es/column';
import { Colgroup } from 'vxe-table/es/colgroup';
import { Toolbar } from 'vxe-table/es/toolbar';
import { Table } from 'vxe-table/es/table';
import zhCN from 'vxe-table/es/locale/lang/zh-CN';
// 按需加载的组件
var components = [
    // 功能模块
    Header,
    Footer,
    Icon,
    Filter,
    // Menu,
    // Edit,
    Export,
    Keyboard,
    Validator,
    // 可选组件
    Column,
    Colgroup,
    Toolbar,
    // 核心
    Table
];
// 默认中文
setup({
    i18n: function (key, args) { return XEUtils.toFormatString(XEUtils.get(zhCN, key), args); }
});
// 默认安装
export function install(app, options) {
    if (XEUtils.isPlainObject(options)) {
        setup(options);
    }
    components.forEach(function (component) { return component.install(app); });
}
export * from 'vxe-table/es/v-x-e-table';
export * from 'vxe-table/es/icon';
// export * from 'vxe-table/es/menu';
// export * from 'vxe-table/es/edit';
export * from 'vxe-table/es/export';
export * from 'vxe-table/es/keyboard';
export * from 'vxe-table/es/validator';
export * from 'vxe-table/es/header';
export * from 'vxe-table/es/footer';
export * from 'vxe-table/es/column';
export * from 'vxe-table/es/colgroup';
export * from 'vxe-table/es/toolbar';
export * from 'vxe-table/es/table';

• 新建 vxe-table/index.js

import * as VXETableExport from './component.js';
export * from './component.js';
export default VXETableExport;

• 在main.js引入

import VXETable from '@/lib/vxe-table/index.js'

app.use(VXETable)

css公共变量注入问题

• 当 webpack的css注入配置文件（即：@/assets/scss/variable.scss）过大的时，出现编译过慢的问题

css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        prependData: '@use "~@/assets/scss/variable.scss" as *'
      },
      scss: {
        prependData: '@use "~@/assets/scss/variable.scss" as *;'
      }
    }
  }

• 现象表现为：启动过慢，修改 variable.scss 文件时，编译过慢，几乎为启动时间一致时。
• 解决方案：
  variable.scss 存放公共变量即可，其他css存放到另一个文件中，在 main.js 中引入就好。

缓存插件

在项目确实过大，modules with no loaders took 较大时,使用缓存

• 安装 hard-source-webpack-plugin

yarn add hard-source-webpack-plugin -D

• 修改 vue.config.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  chainWebpack: (config) => {
     config.plugin('cache').use(HardSourceWebpackPlugin)
  },
  configureWebpack: {
   cache: true,
  }
}

• 缺陷：必须执行2次才能看出效果，但是效果还是很明显的