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

2023-12-25 20:35:36

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

文章来源:https://blog.csdn.net/wanmeijuhao/article/details/135207613
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。