vue性能优化

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

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分离第三方库<br />

一般可以将代码简单分为业务代码和第三方库,如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间。然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级),这时就可以用到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"

vue性能优化

运行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 ^3.2.3 ^3.1.3 ^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项目优化就差不多了。

相关推荐