可以輸入命令獲取默認 webpack 設置

vue inspect > set.js

1.使用緩存

  configureWebpack: {cache: {type: 'filesystem', // 使用文件系統緩存類型buildDependencies: {config: [__filename] // 緩存依賴，例如webpack配置文件路徑}}},

2.啟用 vue-loader (測試明顯加快速度）

const { VueLoaderPlugin } = require('vue-loader')configureWebpack: {module: {rules: [{test: /\.vue$/,loader: 'vue-loader'}]},plugins: [new VueLoaderPlugin(),],},

3.取消?babel-loader 設置

如果有下面設置開發模式下請取消，因為不用它就不會再編譯壓縮 js 所以會更快

    module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/, // 排除node_modules目錄options: {presets: ['@babel/preset-env'], // 使用@babel/preset-env預設}},]},

?

4. 壓縮CSS/JS文件(還沒試過）

使用MiniCssExtractPlugin來提取CSS到單獨的文件，并使用TerserPlugin來壓縮JavaScript。

const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {configureWebpack: {optimization: {minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true, // 移除console語句},},}),],},plugins: [new MiniCssExtractPlugin({filename: '[name].css',}),],},
}

5. 優化resolve配置減少搜索時間

module.exports = {resolve: {extensions: ['.js', '.vue', '.json'], // 減少文件擴展名的搜索次數alias: { // 設置別名，可以減少模塊搜索的路徑深度'@': path.resolve(__dirname, 'src'), // 例如將@指向src目錄},modules: [path.resolve(__dirname, 'src'), 'node_modules'] // 優先從src目錄查找模塊，然后是node_modules目錄，減少查找時間。 }
}

6.安裝 webpack-bundle-analyzer插件來分析

npm install webpack-bundle-analyzer -D

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')plugins: [new BundleAnalyzerPlugin()],

npm run serve 后打開?http://127.0.0.1:8888/

通過鼠標放到紅框中這幾個大的打包后文件可以發現都是下面幾個公共依賴包

element-ui??????? vue????????lodash??????? core,js

只要把這些依賴提取出來，就可以解決 chunk-vendors.js 過大的問題。

使用 externals來提取這些依賴包，告訴 webpack 這些依賴是外部環境提供的，在打包時可以忽略它們，就不會再打到 chunk-vendors.js 中

  configureWebpack: {externals: {vue: 'Vue',lodash: 'lodash','element-ui': 'element-ui',core: 'core',},}

在 index.html 中使用 CDN 引入依賴

<script src="./vue.min.js"></script>

有些包不能這么引入，只能將 cdn 下載下來保存到 src 目錄下，然后引用

import Element from '../utils/element.js'

import { cloneDeep } from '@/utils/lodash.min.js'

再次運行

7.使用?babel-plugin-dynamic-import-node 插件

所說很快，以后有機會試一下

npm install babel-plugin-dynamic-import-node --save-dev

babel.config.js

module.exports = {plugins: ["dynamic-import-node"]
}

8.啟用多線程

好像是沒快多少，還得拿項目試試

npm install thread-loader --save-dev

chainWebpack: config => {config.module.rule('js').use('thread-loader').loader('thread-loader').options({ workers: 2 });},

?