2023-03-21【总结：常见性能优化（二）】对于vue项目你有哪些常见的优化的方案?—— 在Webpack层面对Vue项目进行优化

前端OnTheRun

已于 2023-03-30 23:39:27 修改

阅读量350

点赞数

分类专栏： vue 笔记文章标签： vue webpack vue项目打包 vue.js

于 2023-03-21 10:59:57 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/129684105

版权

本文主要介绍了在Webpack层面优化Vue项目的一系列方法，包括压缩图片、减少ES6转换冗余代码、提取公共代码、预编译模板、提取组件CSS、优化SourceMap以及构建结果分析。通过这些技巧，可以提升项目性能，减少代码体积，提高用户体验。

摘要由CSDN通过智能技术生成

文章目录

- - 二.在Webpack层面对Vue项目进行优化

二.在Webpack层面对Vue项目进行优化

1.使用webpack对图片进行压缩

vue项目中的图片处理

在webpack.base.conf.js中的url.loader设置limit设置图片大小(对小于limit的图片转化成base64格式)
对较大的图片资源,使用image-webpack-loader来压缩图片

如何使用image-webpack-loader压缩图片?

step1:安装``npm install image-webpack-loader --save-dev
step2:在webpack.base.conf.js中进行配置

{
   
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
   
    loader: 'url-loader',
    options: {
   
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
   
      loader: 'image-webpack-loader',
      options: {
   
        bypassOnDebug: true,
      }
    }
  ]
}