vue项目webpack打包优化体积优化，打包体积减少200kb到4Mb

shalDream

已于 2023-06-20 17:59:50 修改

阅读量8k

点赞数 4

文章标签： vue.js webpack

于 2022-02-20 21:15:52 首次发布

本文链接：https://blog.csdn.net/shalDream/article/details/123035583

版权

解决方法

1.压缩图片
应尽可能地压缩项目中的图片，或使用svg矢量图、雪碧图、webp图片（此种图片仅兼容谷歌和opera浏览器，但图片的体积更小）等小体积的图片，达到减少打包体积的目的。

2.路由懒加载
可以在路由配置里，使用require引入页面或组件实现路由懒加载，每个页面大约可以减少10—50kb的打包体积，示例如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

let router = new Router({
  routes: [{
    path: '/index',
    name: 'index',
    component: (resolve) => {
      require(['./index/index.vue'], resolve)
    },
    meta: {
      title: '首页',
      keepAlive: true,
      deepth: 1
    }
  },  {
    path: '/my',
    name: 'my',
    component: (resolve) => {
      require(['./mine/mine.vue'], resolve)
    },
    meta: {
      title: '个人',
      keepAlive: true,
      scrollTop: 0
    }
  },
  {
    path: '/*',
    redirect: '/index'
  }]
})
export default router

3.移除源代码，替换压缩后的源码
修改vue.config.js配置文件，提取公共方法或资源，打包时删除源代码，减少打包后的体积；在html使用外部链接引入相关源代码，
按此方法修改，vue大约可以减少70—80kb的打包体积，echarts大约可以减少100—120kb的打包体积（其他大型的源代码也可按此方法操作），示例如下：
在vue.config.js的配置改动

// 移除vue和echarts核心代码，减小编译后的zip包大小
config.configureWebpack.externals = {
  vue: 'Vue',
  echarts: 'echarts'
}

在index.html引入相关压缩后的源代码,相关源代码可以去BootCDN网站下载，有各个版本的开源和压缩代码，链接：https://www.bootcdn.cn/

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>

  <!--在这里重新引入压缩后的vue和echarts压缩后的源代码-->
  <script src="./commonFile/js/vue.min.js"></script>
  <script src="./commonFile/js/echarts.min.js"></script>
 
</head>
<body>
  <div id="app"></div>
</body>
</html>

4.修改babel.config.js配置文件

const prodPlugins = []// 去除console日志

if (process.env.VUE_APP_CURRENTMODE === 'prod') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', //添加 babel-preset-env 配置
      {
        'modules': false
      }
    ]
  ],
  plugins: [...prodPlugins]// 去除console日志
}

5.组件、api按需引入
只引入需要用到的组件或api，按需引入的组件或api越多，越能减少打包体积。

import Vue from 'vue'
import { swiper, swiperSlide } from "vue-awesome-swiper";

6.静态资源文件的托管（CDN）
修改vue.config.js配置文件，静态资源文件（如图片、文件、公共方法等），可以使用CDN托管静态资源文件，大大减少打包后的体积，图片的数量越多甚至可达到3—4Mb

// 基础配置
var config = {
  productionSourceMap: false,// 如果不需要生产时的源映射，那么设置为false可以加速生产构建
  chainWebpack: config => {
    if (process.env.VUE_APP_CURRENTMODE !== 'prod' && process.env.VUE_APP_CURRENTMODE !== 'prodtest') {
      config.module.rule("images")
        .test(/\.(jpg|png|gif|svg|jpeg)$/)
        .use("url-loader")
        .loader("url-loader")
        .options({
          limit: 3 * 1024,
          name: `${appName}/img/[name].[ext]`
        }).end();
    } else {
      config.module.rule("images")
        .test(/\.(jpg|png|gif|svg|jpeg)$/)
        .use("url-loader")
        .loader("url-loader")
        .options({
          limit: 3 * 1024,//可以限制图片的大小，如超过3Mb的图片使用CDN，小图标可以使用本地资源图片
          publicPath: '这里存放CDN图片的url地址前缀',//这里存放CDN图片的url地址前缀
          name: '[name].[ext]'
        }).end();
    }
  }
}