面试vue2开发时怎么加载编译速度（webpack）

可以输入命令获取默认 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 });
  },