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

测量各个插件和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()
    ]
  }
}