一、背景

• 背景：为了提高页面的加载速度、减小库的体积，来提高用户体验。
• 整体思路：减小modules的体积、压缩图片大小、路由懒加载等优化

二、操作步骤

2.1 开发前的准备工作

准备工作

• 首先安装webpack的可视化资源分析工具，命令行执行

npm i webpack-bundle-analyzer -D

• 然后在vue.config.js配置中，引入插件，代码如下：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
 configureWebpack: {
    plugins: [
      new Webpack.IgnorePlugin(/\.\/locale/, /moment/), //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
      new BundleAnalyzerPlugin(), 
    ]
  },

• 最后命令行执行npm run build --report , 浏览器会自动打开分析结果，如下所示：

针对项目中对webpack的构建速度和网站加载速度有有影响的，例出了几个优化方案可供参考。

三、代码层面的优化

3.1、关闭打包时生成的map文件

在vue.config.js文件中将productionSourceMap设置为false,再次打包便没有了map文件

productionSourceMap: false

3.2、 图片资源的压缩

严格说来这一步不算在编码技术范围内，但是却对页面的加载速度影响很大。对于所有的图片文件，都可以在一个叫tinypng的网站上去压缩一下。网址：图片压缩地址

3.3、图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

• 安装插件 npm install vue-lazyload --save-dev
• 在入口文件 man.js 中引入并使用 import VueLazyload from 'vue-lazyload'
• vue 中直接使用 Vue.use(VueLazyload)
• 在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示（vue-lazyload 的 github 地址。）

<img v-lazy="/static/img/1.png">

3.4、路由懒加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

3.5、长列表性能优化

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了

export default { data: () => ({ users: {} }), 
async created() { 
  const users = await axios.get("/api/users"); 
  this.users = Object.freeze(users); 
} 
};

3.6、v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

• v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

• v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。例如：

<ul> 
    <li v-for="user in activeUsers" :key="user.id"> {{ user.name }} </li>
</ul> 
computed: { 
    activeUsers: function () { 
    return this.users.filter(function (user) { return user.isActive }) } 
    }

四、Webpack 层面的优化

4.1、Webpack 对图片进行压缩

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：

• 首先，安装 image-webpack-loader

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

• 然后，在 vue.config.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, } 
     } 
     ]
}

4.2、减少 ES6 转为 ES5 的冗余代码

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

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

• 修改vue.config.js配置文件为

plugins: [
      transform-runtime
]

4.3、针对类似UserServer多页面工程本地热更新优化

webpack搭建的多页面应用，当项目大了以后，修改一个简单的css，webpack热更新都很慢。通过观察可以发现大部分的时间都耗在94% Asset Optimization 这一步上

• 问题是出在html-webpack-plugin插件上，所以引入另一个插件html-webpack-plugin-for-multihtml

npm i html-webpack-plugin-for-multihtml--save-dev

• 在webpack.dev.conf.js文件中将html-webpack-plugin替换成html-webpack-plugin-for-multihtml

const HtmlWebpackPlugin = require('html-webpack-plugin-for-multihtml')