1、移除 preload 與 prefetch

vue 腳手架默認(rèn)開啟了 preload 與 prefetch，當(dāng)我們項目很大時，這個就成了首屏加載的最大元兇了。先簡單了解一下 preload 與 prefetch。
1、preload 與 prefetch 都是一種資源預(yù)加載機制；
2、preload 是預(yù)先加載資源，但并不執(zhí)行，只有需要時才執(zhí)行它；
3、prefetch 是意圖預(yù)獲取一些資源，以備下一個導(dǎo)航/頁面使用；
4、preload 的優(yōu)先級高于 prefetch。

2.png

vue.config.js的配置

  chainWebpack: config => {
    // 移除 preload(預(yù)載) 插件
    config.plugins.delete('preload')
    // 移除 prefetch(預(yù)取) 插件
    config.plugins.delete('prefetch')
  }

添加配置完成

3.png

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

開發(fā)過程中我們往往需要 console.log 進行調(diào)試，調(diào)試完后一般也會刪除或注釋掉，但難免有時會忘記，所以可以使用 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、下載依賴
如果配置完成 有報錯的話可以降低版本 默認(rèn)的下載最新版本
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中設(shè)置不打包的文件

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

2、查看項目中文件依賴包的版本

4.png

3、在index.html中引入需要外聯(lián)的資源

  <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、設(shè)置配置

  // webpack相關(guān)配置
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
        args[0].terserOptions.compress.drop_console = true
        return args
      })
      //移除預(yù)載插件
    config.plugins.delete('preload')
    //移除預(yù)取插件
    config.plugins.delete('prefetch')
    //圖片壓縮
    config.module
      .rule('images')
      .use('imageWebpackLoader')
      .loader('image-webpack-loader')
      .options({
        disable: process.env.NODE_ENV === 'development', // 開發(fā)環(huán)境下禁止壓縮
        gifsicle: {
          interlaced: false
        }
      })
  }

在線壓縮圖片