测量各个插件和loader所花费的时间
(1). install:
yarn add speed-measure-webpack-plugin-D
(2). Vue-cli 3.x设置:
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')const smp = new SpeedMeasurePlugin({outputFormat: 'human'})// 包裹configureWebpackmodule.exports = {configureWebpack: smp.wrap({resolve: {alias: {"@": resolve("src")}}})}
可视化资源分析工具,分析打包后各个文件的大小,用于分析bundle
(1). install:
yarn add webpack-bundle-analyzer-D
(2). Vue-cli 3.x下,已经对Webpack做了深度的封装,已经是默认配置了.
(1). 安装:
yarn add simple-progress-webpack-plugin -D
(2). 修改vue.config.js:
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin')module.exports = {configureWebpack: {plugins: [new SimpleProgressWebpackPlugin()]}}