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

项目的打包优化可以使项目启动速度和性能必要的清理数据，减少打包后的体积​

1.什么是preload?

preload是一种预加载机制，可以将一些资源提前请求，使得在用户需要的时候资源已经加载完成

2.什么是perfetch?

prefetch是一种预获取机制，会在浏览器空闲时提前加载一些资源，但有时候可能会导致加载了用户并不需要的资源

3.移除preload和perfetch

vue脚手架默认会开启 preload 与 prefetch，但项目很大时，这两个就会使首屏加载速度变慢。

首先来了解一下preload和perfetch

1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不执行，只有需要时才执行它；
3、prefetch 是意图预获取一些资源，以备下一个导航/页面使用；
4、preload 的优先级高于 prefetch。
配置前：

vue.config.js配置

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

也可以根据需要进行配置

chainWebpack(config) {
    // it can improve the speed of the first screen, it is recommended to turn on preload

    // 开启preload，它可以提高首屏的加载速度
    // preload是一种预加载机制，可以将一些资源提前请求，使得在用户需要的时候资源已经加载完成
    config.plugin("preload").tap(() => [
      {
        rel: "preload", // 设置资源关系为preload
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], // 设置黑名单，这些文件不会被preload
        include: "initial", // 只有初始化的资源会被preload
      },
    ]);

    // when there are many pages, it will cause too many meaningless requests
    // 删除prefetch插件，当页面过多时，prefetch可能会导致过多的无意义请求
    // prefetch是一种预获取机制，会在浏览器空闲时提前加载一些资源，但有时候可能会导致加载了用户并不需要的资源
    config.plugins.delete("prefetch");
}

配置后：

4.使用 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
      })
}

5.使用 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
          })
        ]
      }

压缩前：

压缩后：

6.配置使用 CDN 方式引入资源库

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

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

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

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配置之前文件

5、配置完cdn的文件

7.压缩图片

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
        }
      })
  }

在线压缩图片
​