前端性能优化——包体积压缩82%、打包速度提升65%

最新推荐文章于 2025-04-07 10:02:03 发布

前端小羽——互联网大厂

最新推荐文章于 2025-04-07 10:02:03 发布

阅读量3.5k

点赞数 40

文章标签： javascript 前端框架性能优化

本文链接：https://blog.csdn.net/djemx2025/article/details/139965989

版权

压缩项目打包后的体积大小、提升打包速度，是前端性能优化中非常重要的环节，笔者结合工作中的实践总结，梳理出一些 常规且有效 的性能优化建议

项目背景

技术栈： vue-cli3 + vue2 + webpack4
主要插件：elementUI + echarts + axios + momentjs

目标： 通过一系列的优化方案，对比打包体积和速度的前后变化，来验证方案的有效性

项目初始体积与速度

初始体积 2.25M

vue 项目可以通过添加--report命令： "build": "vue-cli-service build --report"，打包后 dist 目录会生成 report.html 文件，用来分析各文件的大小

或者通过安装 webpack-bundle-analyzer 插件来分析，步骤如下：

1）安装

npm install webpack-bundle-analyzer -D

2）vue.config.js中引入

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: {
      plugins: [
         new BundleAnalyzerPlugin()
      ]
  }
}

3）npm run serve运行后，在浏览器打开http://127.0.0.1:8888/ 可以看到分析页面

初始打包速度 25386ms

开始优化 ✈︎

1、externals 提取项目依赖

从上面的打包分析页面中可以看到，chunk-vendors.js 体积为 2.21M，其中最大的几个文件都是一些公共依赖包，那么只要把这些依赖提取出来，就可以解决 chunk-vendors.js 过大的问题

可以使用 externals 来提取这些依赖包，告诉 webpack 这些依赖是外部环境提供的，在打包时可以忽略它们，就不会再打到 chunk-vendors.js 中

1）vue.config.js 中配置：

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts'
    }
}

2）在 index.html 中使用 CDN 引入依赖

  <body>
    <script src="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
    <script src=&#

最低0.47元/天解锁文章