辅助工具
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次才能看出效果,但是效果还是很明显的