npm i speed-measure-webpack-plugin

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

module.exports = { 
configureWebpack: {
 plugins: [
      new BundleAnalyzerPlugin(),
      new SpeedMeasurePlugin(),
   ]
   }
};

npm i webpack-bundle-analyzer

 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

module.exports = { 
configureWebpack: {
plugins: [
   + new BundleAnalyzerPlugin(),
     new SpeedMeasurePlugin(),
  ]
  }
};

// vue.config.js
 configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name,
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    externals: {
      axios: 'axios',
      'vue-router': 'VueRouter',
      'vue': 'Vue',
      'Vuex': 'Vuex',
      'element-ui': 'ELEMENT',
    }
  }

// index.html
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
    <script src="https://unpkg.com/vuex@3.1.0/dist/vuex.global.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.12/lib/index.js"></script>

  npm i image-webpack-loader 
  
  chainWebpack: config => {
    config.module
      .rule('images')
      .test(/.(png|jpe?g|gif|svg)(?.*)?$/)
      .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true })
        .end()
  }, 

const CompressionWebpackPlugin = require("compression-webpack-plugin");
  chainWebpack: config => {
    // 生產(chǎn)環(huán)境，開啟js\css壓縮
    if (process.env.NODE_ENV === "production") {
      config.plugin("compressionPlugin").use(
        new CompressionWebpackPlugin({
          test: /.(js|css|less)$/, // 匹配文件名
          threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
          minRatio: 0.8,
          deleteOriginalAssets: true // 刪除源文件
        })
      );
    }
  }

//nginx.conf

http { 
    gzip on;
    gzip_vary on; 
    gzip_min_length 1k; 
    gzip_comp_level 6; 
    gzip_buffers 16 8k; 
    gzip_proxied any; 
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 

}

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

  config.plugins.push(
          new UglifyJsPlugin({
              uglifyOptions: {
                  compress: {
                      drop_debugger: true,//生產(chǎn)環(huán)境自動刪除debugger
                      drop_console: true, //生產(chǎn)環(huán)境自動刪除console
                  },
                  warnings: false,
              },
              sourceMap: false,   //關(guān)掉sourcemap 會生成對于調(diào)試的完整的.map文件，但同時也會減慢打包速度
              parallel: true, //使用多進程并行運行來提高構(gòu)建速度。默認并發(fā)運行數(shù)：os.cpus().length - 1。
          }),

// 使用 `import()` 動態(tài)導入
// router/index.js 

import Vue from 'vue' 
import Router from 'vue-router'
Vue.use(Router) 
export default new Router({ 
    routes: [ 
    { path: '/about', component: () => import('@/views/About.vue'), // 懶加載 About 組件 }, 
    { path: '/contact', component: () => import(/* webpackChunkName: "contact" */ '@/views/Contact.vue'),  // 命名代碼塊 
    }, 
  ],
})

// 使用異步組件聲明
// router/index.js 
    import Vue from 'vue' 
    import Router from 'vue-router' 
    Vue.use(Router) 

export default new Router({ 
   routes: [ { 
   path: '/example', 
       component: { 
       // 使用異步組件定義 
       async component() { 
       const {  default: ExampleComponent  } = await import('@/views/Example.vue'); 
       return ExampleComponent; 
       }, 
     }, 
   }, 
   // 其他路由... 
   ],
   })

npm install --save-dev script-ext-html-webpack-plugin


const blackList = ['script1.js', 'script2.js'];


plugins: [
  new ScriptExtHtmlWebpackPlugin({
    preload: {
      test: /.js$/,
      excludeChunks: blackList
    }
  })
]

// 刪除文件中各個腳本都在使用的腳本命令，然后統(tǒng)一在html頁面中進行封裝，需要用到的時候，去html頁面中進行獲取，這樣就可以減少http的請求

    config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [{          // `runtime` must same as runtimeChunk name. default is `runtime`          inline: /runtime\..*\.js$/,        }, ])
        .end();

//1. 創(chuàng)建 dll.config.js 配置文件
import { DllPlugin } from "webpack";

export default {
    // 需要抽離的依賴
    entry: {
        vendor: ["vue", "vue-router", "axios", "echarts"]
    },
    mode: "production",
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: "all",
                    name: "vendor",
                    test: /node_modules/
                }
            }
        }
    },
    output: {
        filename: "[name].dll.js", // 輸出路徑和文件名稱
        library: "[name]", // 全局變量名稱：其他模塊會從此變量上獲取里面模塊
        path: AbsPath("dist/static") // 輸出目錄路徑
    },
    plugins: [
        new DllPlugin({
            name: "[name]", // 全局變量名稱：減小搜索范圍，與output.library結(jié)合使用
            path: AbsPath("dist/static/[name]-manifest.json") // 輸出目錄路徑
        })
    ]
};

// package.json 配置腳本

"build:dll": "webpack --config ./dll.config.js",

// 使用 `DllReferencePlugin` 將打包生成的dll文件，引用到需要的預編譯的依賴上來，并通過 `html-webpack-tags-plugin` 在打包時自動插入dll文件

// vue.config.js 配置如下

import { DllReferencePlugin } from "webpack";
import HtmlTagsPlugin from "html-webpack-tags-plugin";

export default {
  configureWebpack: {
    plugins: [
      new DllReferencePlugin({
        manifest: AbsPath("dist/static/vendor-manifest.json") // manifest文件路徑
      }),
      new HtmlTagsPlugin({
        append: false, // 在生成資源后插入
        publicPath: "/", // 使用公共路徑
        tags: ["static/vendor.dll.js"] // 資源路徑
      })
    ]
  }
};

configureWebpack: config => { 
    config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn/)) 
}

module.exports = {
  configureWebpack: config => {
    if (progress.env.NODE_ENV === 'production') {
      config.optimization = {
        splitChunks: {
          cacheGroups: {
            common: {
              name: "chunk-common",
              chunks: "initial",
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 1,
              reuseExistingChunk: true,
              enforce: true
            },
            vendors: {
              name: "chunk-vendors",
              test: /[\\/]node_modules[\\/]/,
              chunks: "initial",
              priority: 2,
              reuseExistingChunk: true,
              enforce: true
            },
            elementUI: {
              name: "chunk-hui",
              test: /[\\/]node_modules[\\/]hui[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
            },
            echarts: {
              name: "chunk-echarts",
              test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
              chunks: "all",
              priority: 4,
              reuseExistingChunk: true,
              enforce: true
            }
          }
        }
      };
    }
  },
  chainWebpack: config => {
    if (progress.env.NODE_ENV === 'production') {
      config.optimization.delete("splitChunks");
    }
    return config;
  }
};

module.exports = {
  lintOnSave: false,
  productionSourceMap: process.env.NODE_ENV !== "production", //打包不生成map文件
}

module.exports = { 
    chainWebpack: config => { // 添加別名 
        config.resolve.alias 
        .set("vue$", "vue/dist/vue.esm.js") 
        .set("@", resolve("src")) 
        .set("@assets", resolve("src/assets")) 
        .set("@scss", resolve("src/assets/scss")) 
        .set("@components", resolve("src/components")) 
        .set("@plugins", resolve("src/plugins")) 
        .set("@views", resolve("src/views")) 
        .set("@router", resolve("src/router")) 
        .set("@store", resolve("src/store")) 
        .set("@layouts", resolve("src/layouts")) 
        .set("@static", resolve("src/static")); 
        } 
     };

npm i hard-source-webpack-plugin

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin")

 plugins: [
      new BundleAnalyzerPlugin(),
      new SpeedMeasurePlugin(),
      new HardSourceWebpackPlugin()
   ],
   
   //提升第二次運行時間

npm install HappyPack -D

const HappyPack = require('happypack');
const os = require('os');
// 開辟一個線程池，拿到系統(tǒng)CPU的核數(shù)，happypack 將編譯工作利用所有線程
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  configureWebpack: {
     plugins: [
       new HappyPack({
        id: 'happybabel',
        loaders: ['babel-loader'],
        threadPool: happyThreadPool
      })
     ]
  }
}

// vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module.rule('vue')
      .use('thread-loader')
      .loader('thread-loader')
      .end()
      // 在目標 loader 前插入 thread-loader
      .use('vue-loader')
      .loader('vue-loader')
      .end()
  }
}