前端性能优化三十四：花裤衩模板引入打包分析工具

测量各个插件和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'
})
// 包裹configureWebpack
module.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()]}
}