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

作者:GeniusLyzh
出处:http://www.cnblogs.com/GeniusLyzh/
本文链接:https://www.cnblogs.com/GeniusLyzh/p/14852563.html
本文版权归作者和博客园共有,欢迎转载,须保留此段声明,并给出原文链接,谢谢!
如果阅读了本文章,觉得有帮助,欢迎点击右下角推荐
posted @   Aarongo  阅读(490)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示