Vue项目打包优化流程详解

Vue项目打包优化

优化方案

1. 路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

可根据官网操作：
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

2. 第三方插件按需加载

element-ui，vant，uni-app等等… 实现按需加载，同时我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的

3. 插件库使用CDN加速，导入插件时使用第三方库进行使用。

https://www.bootcdn.cn/ 官网 根据自己项目package.json文件对应版本进行导入

index.html中引入对应版本 我这里基于Vue2项目进行引入。

<!-- vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- vue-router -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.1/vue-router.min.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.min.js"></script>
<!-- element-ui -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
<!-- echarts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.common.js"></script>
<!-- ore-js 是 babel-polyfill 的底层依赖，通过各种奇技淫巧，用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。 -->
<script src="https://cdn.bootcdn.net/ajax/libs/core-js/3.28.0/minified.js"></script>
<!-- 持久化 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vuex-persistedstate/4.1.0/vuex-persistedstate.es.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/4.1.0/vuex.cjs.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Base64/1.2.0/base64.js"></script>

vue.config.js中进行配置，打包时不要打包这个CDN引入的文件

configureWebpack: config => {
    config.externals = {
      vue: "Vue",
      "vue-router": "VueRouter",
      axios: "axios",
      // 属性带-杠 就用引号否则不用
      "element-ui": "element-ui",
      echarts: "echarts",
      "core-js": "core-js",
      "vuex-persistedstate": "vuex-persistedstate",
      vuex: "vuex",
      Base64: "Base64"
    }
  }

4. gzip压缩，有两种方式.

• 让服务器压缩：当浏览器发送请求时，服务器进行实时压缩，返回浏览器
• webpack打包时，进行压缩，浏览器请求时，服务端进行一些配置，返回压缩文件

下载指令CMD

npm i compression-webpack-plugin -D

vue.config.js中进行配置

 chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css)$/,
          threshold: 10240, // 超过10kb的文件就压缩
          deleteOriginalAssets: true, // 不删除源文件
          minRatio: 0.8
        })
      )
    }
  }

打包时dist/js中会有gz压缩文件，说明压缩成功。

5. 打包不生成map文件

map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。

那么在项目打包时我们是可以设置不生成map文件的，因为map文件会使得我们的打包文件大很多

不生成map文件配置如下

module.exports = {
  productionSourceMap: false,
}

6. 可视化分析包大小

这是一个插件工具，能够看到自己的项目大小，并且通过视图的形式展示出来，这样就可以更加明确自己要优化哪一块的项目文件。

下载指令CMD

npm install webpack-bundle-analyzer -D

vue.config.js中进行配置

 chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
    }
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
      config.plugin('CompressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css)$/,
          threshold: 10240, // 超过10kb的文件就压缩
          deleteOriginalAssets: true, // 不删除源文件
          minRatio: 0.8
        })
      )
    }
  }

运行指令

npm run build --report

优化前dist文件16.6mb

优化后dist文件1.23mb

Vue项目打包优化完成