Vue CLI4.x 配置指南

持续更新中

Version

Vue CLI 测试版本：@vue/cli 4.5.4

Table of content

• 去掉console.log
• 添加打包分析

⚡去掉console.log

// 内置插件不需要安装
const TerserPlugin = require('terser-webpack-plugin')

// 方法一：简单配置
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
          terserOptions: {
              compress: {
                  drop_console: true,
                  drop_debugger: true,
              },
          },
          sourceMap: false,
      })
    ],
  },
};

// 方法二：基于环境有条件地配置
module.exports = {
  configureWebpack: (config) => {
          if (process.env.NODE_ENV === 'production') {
              const plugins = []
              plugins.push(
                  new TerserPlugin({
                      terserOptions: {
                          compress: {
                              drop_console: true,
                              drop_debugger: true,
                          },
                      },
                      sourceMap: false,
                  })
              )
              config.optimization.minimizer = [
                  ...config.optimization.minimizer,
                  ...plugins,
              ]
          }
      },
}

⚡添加打包分析

• Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

• Usage

// 方法一：通过configureWebpack选项配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: (config) => {
          if (process.env.NODE_ENV === 'production') {
              const plugins = []
              plugins.push(
                  new BundleAnalyzerPlugin()
              )
              config.plugins = [
                  ...config.plugins,
                  ...plugins,
              ]
          }
      },
}

• Reference
  • webpack-bundle-analyzer Homepage

License

MIT

Links

repo

标签：指南,...,CLI4,Vue,console,bundle,webpack,plugins,config
来源： https://www.cnblogs.com/GeniusLyzh/p/14852563.html