vue项目打包优化--提高首屏加载速度

1、移除 preload 与 prefetch

vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。先简单了解一下 preload 与 prefetch。
1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不执行，只有需要时才执行它；
3、prefetch 是意图预获取一些资源，以备下一个导航/页面使用；
4、preload 的优先级高于 prefetch。

2.png

vue.config.js的配置

  chainWebpack: config => {
    // 移除 preload(预载) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(预取) 插件
    config.plugins.delete('prefetch')
  }

添加配置完成

3.png

2、使用 terser-webpack-plugin 清除 console.log

开发过程中我们往往需要 console.log 进行调试，调试完后一般也会删除或注释掉，但难免有时会忘记，所以可以使用 terser-webpack-plugin 来清除 console.log。
首先需要下载依赖
npm install terser-webpack-plugin --save-dev
然后配置

chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
}

3、使用 compression-webpack-plugin 开启 gzip 压缩

1、下载依赖
如果配置完成 有报错的话可以降低版本 默认的下载最新版本
npm install compression-webpack-plugin@6.1.1 -D
2、修改配置

configureWebpack: config=>{
        config.resolve={
          ...config.resolve,
          alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, './src'),
          }
        },
        config.externals= {
          'vue': 'Vue',
          'vue-router': 'VueRouter',
          'vuex': 'Vuex',
          'element-ui': 'ELEMENT',
        }
        config.plugins = [
          ...config.plugins,
          // 开启 gzip 压缩
          new CompressionPlugin({
            filename: '[path][base].gz',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
          })
        ]
      }

压缩前：

11.png

压缩后

22.png

4、配置使用 CDN 方式引入资源库

有一些js的依赖我们可以不用打包到我们程序中，可以使用cdn的方式来链接js的依赖文件。
1、首先先看配置：在vue.config.js中设置不打包的文件

configureWebpack: {
      externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'element-ui': 'ELEMENT',
      }
    }

2、查看项目中文件依赖包的版本

4.png

3、在index.html中引入需要外联的资源

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js"></script>

4、没有开启cdn配置之前文件

1.png

5、配置完cdn的文件

6.png

5、压缩图片

1、下载依赖
cnpm install image-webpack-loader --save-dev
2、设置配置

  // webpack相关配置
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
      //移除预载插件
    config.plugins.delete('preload')
    //移除预取插件
    config.plugins.delete('prefetch')
    //图片压缩
    config.module
      .rule('images')
      .use('imageWebpackLoader')
      .loader('image-webpack-loader')
      .options({
        disable: process.env.NODE_ENV === 'development', // 开发环境下禁止压缩
        gifsicle: {
          interlaced: false
        }
      })
  }

在线压缩图片