Vue CLI4.x 配置指南

Vue CLI4.x 配置指南

Version

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

目录

⚡去掉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({
                      analyzerMode:'static' // static模式会生成一个html页面查看,默认为server
                  })
              )
              config.plugins = [
                  ...config.plugins,
                  ...plugins,
              ]
          }
      },
}

🎃 使用SplitChunksPlugin分离第三方模块

module.exports = {
  configureWebpack: (config) => {
    if (process.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,
            },
            // 单独分离elementplus库
            elementUI: {
              name: 'chunk-elementplus',
              test: /[\\/]node_modules[\\/]element-plus[\\/]/,
              chunks: 'all',
              priority: 3,
              reuseExistingChunk: true,
              enforce: true,
            },
          },
        }
      }
    },
  }

License

MIT

posted @ 2021-06-05 13:24  Aaronlamz  阅读(6)  评论(0编辑  收藏  举报