vue性能优化

Posted 2021-02-21 ze-hua

页面性能优化可以从两方面着手，第一个时页面加载速度，第二个是页面运行时性能，这里主要说页面加载性能。

1.vue 路由的懒加载

component: () =>import(/* webpackChunkName: "quality-overseer-msg" */ "@/views/quality-overseer/QualityOverseerMsg.vue")

2.第三方库的按需引入

如果框架中使用一些库，像element-ui,echarts，这些库不要一下子全部引入，二是按需引入，这样可以减小打包体积。

3.图片的压缩

这里推荐使用https://tinypng.com/ 

4.js,css 文件的最小压缩

module.exports = {
  chainWebpack: config => {
    config.optimization.minimize(true);
  }
}

5.css文件的抽离

因为js会动态的加载出css，所以js文件包会比较大，那么需要提取css代码到文件. 这里我们只需要将css配置一下:

module.exports = {
  css: {
      extract: true
  }
}

 

6.js,css代码公用代码提取, 按需引入(CDN加载)

module.exports = {
    // 用cdn方式引入
    config.externals({
      ‘vue‘: ‘Vue‘,
      ‘vuex‘: ‘Vuex‘,
      ‘vue-router‘: ‘VueRouter‘,
      ‘axios‘: ‘axios‘
    })
    }
}

index.html加入CDN地址,注意引入的时候要写在body里面，否则会报错。

 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>

 

7.使用DLLPlugin分离第三方库


一般可以将代码简单分为业务代码和第三方库，如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。

基本用法在根文件夹下

（1）编写配置文件webpack.dll.config.js

const path = require(‘path‘)
const webpack = require(‘webpack‘)
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘)

// dll文件存放的目录
const dllPath = ‘public/vendor‘

module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: [‘vue‘, ‘vue-router‘, ‘echarts‘, ‘axios‘, ‘element-ui‘]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: ‘[name].dll.js‘,
    // vendor.dll.js中暴露出的全局变量名
    // 保持与 webpack.DllPlugin 中名称一致
    library: ‘[name]_[hash]‘
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin([‘*.*‘], {
      root: path.join(__dirname, dllPath)
    }),
    // 设置环境变量
    new webpack.DefinePlugin({
      ‘process.env‘: {
        NODE_ENV: ‘production‘
      }
    }),
    // manifest.json 描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, ‘[name]-manifest.json‘),
      // 保持与 output.library 中名称一致
      name: ‘[name]_[hash]‘,
      context: process.cwd()
    })
  ]

 （2）在packge.json中加入一行命令 "dll": "webpack -p --progress --config ./webpack.dll.conf.js"

运行npm run dll 后会生成dll 文件夹 vendor 

(3)忽略已编译文件

为了节约编译的时间，这时间我们需要告诉 webpack 公共库文件已经编译好了，减少 webpack 对公共库的编译时间

在vue.config.js文件中加入一下代码，（没有的话在项目根目录下新建该文件）

const webpack = require(‘webpack‘)

module.exports = {
    configureWebpack: {
        plugins: [
          new webpack.DllReferencePlugin({
            context: process.cwd(),
            manifest: require(‘./public/vendor/vendor-manifest.json‘)
          })
        ]
    }
}

（4.index.html 中加载生成的 dll 文件

<script src="./vendor/vendor.dll.js"></script>

(5).如果觉得第四步手动引入麻烦，可以在vue.config.js添加一下配置

1.首先安装相关插件 yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev

2.vue.config.js 在 configureWebpack plugins 节点下，配置 add-asset-html-webpack-plugin

const path = require(‘path‘)
const webpack = require(‘webpack‘)
const AddAssetHtmlPlugin = require(‘add-asset-html-webpack-plugin‘)

module.exports = {
    ...
    configureWebpack: {
        plugins: [
          new webpack.DllReferencePlugin({
            context: process.cwd(),
            manifest: require(‘./public/vendor/vendor-manifest.json‘)
          }),
          // 将 dll 注入到 生成的 html 模板中
          new AddAssetHtmlPlugin({
            // dll文件位置
            filepath: path.resolve(__dirname, ‘./public/vendor/*.js‘),
            // dll 引用路径
            publicPath: ‘./vendor‘,
            // dll最终输出的目录
            outputPath: ‘./vendor‘
          })
        ]
    }
}

至此vue项目优化就差不多了。