在vue.config.js中配置uglifyjs-webpack-plugin压缩代码

最新推荐文章于 2026-04-11 09:15:24 发布

原创最新推荐文章于 2026-04-11 09:15:24 发布 · 3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

TKP

标签

#javascript #webpack #vue.js

收录于

javaScript 同时被 2 个专栏收录

48 篇文章

订阅专栏

vue

47 篇文章

订阅专栏

本文介绍如何在Vue项目中实现分包打包，通过安装uglifyjs-webpack-plugin插件并配置vue.config.js，使得每个页面仅加载所需的js文件，有效减轻首页加载负担。

如果vue项目打完包，js文件夹里面只有一个app.js的话，就会在首页加载所有的js代码。如果需要分包打包的话，可以执行以下代码，这样的话每个页面就只会加载对应的js文件，减少首页的负担

1.安装代码压缩插件

	npm install uglifyjs-webpack-plugin --save-dev

2.在vue.config.js中配置

configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    let UglifyPlugin = require('uglifyjs-webpack-plugin');
    if (process.env.NODE_ENV == 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
            uglifyOptions: {
                warnings: false,
                compress: {
                  drop_console: true, 
                  drop_debugger: false,
                  pure_funcs: ['console.log'] 
                }
            }
         })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
   }
  }