LAFINSIR 2024-03-01 18:08 采纳率: 69.2%
浏览 20
已结题

WEBPACK性能优化

VUE2项目和VUE3项目做了什么性能优化?
最近面试经常问这个,给我一点你们实际开发中的例子
不要网上的东西
要真实开发过程的东西,VUE2,VUE3都告诉我一点
WEBPACK是怎么优化的

我整个项目打包完才6M,就没做过很大的项目,老是问我这个问题都不知道怎么答

不要网上的东西,给我点真实的东西,最好附上代码案例

  • 写回答

22条回答 默认 最新

  • 专家-百锦再 全栈领域优质创作者 2024-03-02 11:02
    关注

    GPT回答,我把关,你要的config.js优化

    vue.config.js 文件中,可以通过配置不同的参数和插件来对 Vue 项目进行优化。以下是一些常见的优化方法:

    1. 配置webpack:通过configureWebpack选项,可以自定义 webpack 配置,包括输出、代码分割、压缩等。
    module.exports = {
      configureWebpack: {
        // 添加分离打包配置
        optimization: {
          splitChunks: {
            chunks: 'all'
          },
          runtimeChunk: true
        }
      }
    }
    
    1. CDN引入第三方库:将一些不常更改的第三方库通过 CDN 引入,减少打包体积。
    module.exports = {
      chainWebpack: config => {
        config.externals({
          'vue': 'Vue',
          'vuex': 'Vuex',
          'vue-router': 'VueRouter'
        });
      }
    };
    
    1. 代码压缩优化:通过jscssminimize等配置项开启代码压缩,减小文件体积,在production环境下会自动进行。
    module.exports = {
      productionSourceMap: false,
      css: {
        extract: true,
        sourceMap: false,
        loaderOptions: {
          css: {},
          postcss: {
            plugins: [
              require('postcss-preset-env')()
            ]
          }
        }
      }
    };
    
    1. Gzip压缩:配置服务器开启对 Gzip 压缩,减小网络传输文件体积。
    module.exports = {
      devServer: {
        compress: true
      }
    };
    
    1. 图片压缩:在构建时通过插件进行图片压缩,减小图片尺寸,提高加载速度。
    const ImageminPlugin = require('imagemin-webpack-plugin').default;
    
    module.exports = {
      configureWebpack: {
        plugins: [
          new ImageminPlugin({
            test: /\.(jpe?g|png|gif|svg)$/i
          })
        ]
      }
    };
    

    以上是一些在 vue.config.js 中进行优化的方法,可以根据具体项目的需求和情况,选择适合的优化方式。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(21条)

报告相同问题?

问题事件

  • 系统已结题 3月13日
  • 已采纳回答 3月5日
  • 创建了问题 3月1日

悬赏问题

  • ¥15 有没有复现过PFENet的,如何解决?
  • ¥15 FDMA,OFDMA,TDMA 和 CDMA 系统容量对比仿真
  • ¥15 图神经网络的入侵检测
  • ¥15 工业数据采集技术+存储架构推荐
  • ¥15 GPT-SOVITS如何训练少数民族语言支持合成语音
  • ¥20 树莓派4b使用Camera Module 3时出现the system should be configured for the legacy camera stack问题
  • ¥200 GitHub开源程序配置在VScode调试
  • ¥15 爬虫保存的scv文件0kb
  • ¥20 如何实现基于强化学习的带电作业机械臂的运动规划与控制
  • ¥15 使用wpf制作打砖块游戏时遇到的一个Bug