vue性能优化，也是vue面试的重点-webpack层优化

学习地址：https://mp.weixin.qq.com/s/l8isi43gxWqNRVjLgEGHkQ

vue性能优化可以从以下三个方面入手：

1. vue代码层
2. webpack配置层
3. 基础的web技术层面

上一篇总结了vue代码层优化

开始

二：webpack配置层优化

1.webpack对图片压缩

首先，安装 image-webpack-loader ：

npm install image-webpack-loader --save-dev

然后，在 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,
      }
    }
  ]
}

如果是使用了vue-cli3以上搭建的vue项目，项目本身没有webpack.base.conf.js这个文件，可以参考https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7来解决。

2.较少ES6转ES5冗余代码

首先，安装 babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

然后，修改 .babelrc 配置文件为：

"plugins": [
    "transform-runtime"
]

其他优化地方可参考文章开头链接。

下一篇：基础web技术层优化