Vue-cli 项目如何利用 terser-webpack-plugin 优化编译_Vue-cli 项目如何利用 SplitChunksPlugin 优化编译

npm install terser-webpack-plugin --save-dev

在 Webpack 配置文件中引入并配置:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
}

上述配置中,我们设置 terser 的压缩选项,其中 drop_console 为 true 表示会在生产环境中删除所有的 console 语句。 利用 SplitChunksPlugin 优化 Vue-cli 项目编译 在 Vue-cli 项目中使用 SplitChunksPlugin 可以帮助我们优化编译后的 JavaScript 文件,将公共模块提取成单独的文件,从而减少页面首次加载时的文件体积。 要使用 SplitChunksPlugin,我们需要在 Webpack 配置文件中进行如下配置:

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

上述配置中,我们设置 SplitChunksPlugin 的相关选项,其中 chunks 为 'all' 表示对同步和异步代码都进行代码分割,minSize 表示最小分割文件大小为 30KB,cacheGroups 中的 vendors 用于提取 node_modules 中的公共模块,default 用于提取业务代码中的公共模块。