探寻webpack打包vue前端项目的过程和出现的问题

简介: 前端 vue2 项目中,多人开发,从一段时间开始发现打包变得特别慢,每次线上更新也至少要10几20分钟,正常项目线上更新一般也就1、2分钟,新需求开发拉新分支本地运行也要至少5、6分钟才能运行的起来

前端 vue2 项目中,多人开发,从一段时间开始发现打包变得特别慢,每次线上更新也至少要10几20分钟,正常项目线上更新一般也就1、2分钟,新需求开发拉新分支本地运行也要至少5、6分钟才能运行的起来。

查找问题

为了找出打包慢的原因,我们首先得找到到底是哪些文件太大还是耗时太久?这中间用到了两个插件:

  • webpack-bundle-analyzer:分析打包过后的包的大小
  • speed-measure-webpack-plugin:分析各个插件和loader打包用时

1、安装 webpack-bundle-analyzer

# NPM
npm install --save-dev webpack-bundle-analyzer

# Yarn
yarn add -D webpack-bundle-analyzer

2、安装 speed-measure-webpack-plugin

# NPM
npm install --save-dev speed-measure-webpack-plugin

# Yarn
yarn add -D speed-measure-webpack-plugin

3、配置 webpack 这两个插件

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')

module.exports = {
   
   
  configureWebpack: config => {
   
   
    config.plugins.push(new BundleAnalyzerPlugin())
    config.plugins.push(new SpeedMeasurePlugin())
  }
}

插件分析结果

  • 打包总时间:5分30.61秒
  • 打包文件总大小:24.03 MB
  • 打包时间比较长的插件和loader:@vue/vue-loader-v15、mini-css-extract-plugin、css-loader、postcss-loader、stylus-loader、cache-loader
  • 打包最大的单个文件:依赖了 echarts 的页面,大小为3.79MB,还有 xlsx 和 html2canvas 也比较大
    1.png
    2.png
    3.png
    猜测大饱满可能是 echarts 造成的,项目里是直接全部导入的 echarts 库,其实项目中只用到了一个折线图,先改成按需导入

按需导入 echarts 打包分析结果

按需引入封装的 echarts.js,项目中只用到了一个折线图,所以只需引入 LineChart:

// 引入 echarts 核心模块 和 Canvas 渲染器
import * as echarts from 'echarts/core'
import {
   
    CanvasRenderer } from 'echarts/renderers'

// 引入折线图图表
import {
   
    LineChart } from 'echarts/charts'

// 引入图表里用到的组件
import {
   
   
  LegendComponent,
  GridComponent,
} from 'echarts/components'

// 注册必须的组件
echarts.use([
  LegendComponent,
  GridComponent,
  CanvasRenderer,
  LineChart
])

export default echarts
<template>
  <div>
    <div ref="canvas" />
  </div>
</template>
<script>
  import echarts from './echarts.js'
  let LineChart = null // 图表实例

  export default {
    methods: {
      chartInit() {
        if (!LineChart) LineChart = echarts.init(this.$refs.canvas)

        // 设置参数
        LineChart.setOption({
          // ...
        }
      }
    }
  }
</script>
  • 打包总时间:5分52.31秒
  • 打包文件总大小:22.07 MB
  • 打包后的 echarts 的只有1点多MB

打包的文件大小确实有变小,但是打包时间缺变得更长了。

4.png
5.png
6.png

注意上面的分析都是基于 npm run dev 打的开发包。

相关文章
|
26天前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
1天前
|
JavaScript 前端开发
React与Vue性能对比:两大前端框架的性能
React与Vue性能对比:两大前端框架的性能
|
6天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化中的Webpack Tree Shaking
【2月更文挑战第2天】在前端开发中,性能优化一直是开发者们不断追求的目标之一。而在这个过程中,Webpack Tree Shaking 技术作为一种重要的优化手段,对于减小前端应用的体积、提高加载速度起到了至关重要的作用。本文将深入探讨Webpack Tree Shaking 技术的原理和实现方式,帮助读者更好地理解并运用这一技术来优化前端应用性能。
|
6天前
|
前端开发 JavaScript C++
探讨前端框架选择:React vs Angular vs Vue
【2月更文挑战第2天】 在当今快速发展的前端开发领域,选择合适的前端框架至关重要。本文将深入探讨三大热门前端框架:React、Angular和Vue,分析它们的特点、优势和劣势,帮助开发者更好地理解并选择适合自己项目的前端框架。
11 3
|
6天前
|
JavaScript 前端开发 API
新一代前端框架Vue 4.0的特性及应用
【2月更文挑战第2天】随着前端技术的不断发展,Vue作为一款优秀的前端框架在市场上得到了广泛的应用和认可。本文将介绍新一代前端框架Vue 4.0的特性及其在实际项目中的应用,帮助开发者更好地了解并应用这一技术。
|
8天前
|
JavaScript 应用服务中间件 nginx
VUE3项目启动过程中遇到的问题记录
VUE3项目启动过程中遇到的问题记录
20 0
|
23天前
|
JavaScript 前端开发 测试技术
消灭前端闪烁魔鬼:Vue中的防抖术
消灭前端闪烁魔鬼:Vue中的防抖术
37 0
|
24天前
|
前端开发 JavaScript 安全
|
24天前
|
前端开发 JavaScript Java
|
24天前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

相关产品

  • 云迁移中心