在vue.config.js中优化webpack配置的方法(持续更新)

前言:

在日常开发中我们离不开打包工具webpack,但是不同的配置会影响我们项目的运行构建时间,也会影响打包之后项目包的大小,这篇文章记录一下我使用过的可以优化webpack的配置。

注:以本专栏上篇文章里面的vue.config.js为基础,去加配置

一、压缩图片

1、先下载依赖

复制代码
npm install --save-dev image-webpack-loader

2、在vue.config.js的module.exports上面先定义设置值

①默认设置:(4M的图片使用默认设置压缩成1.4M)

javascript 复制代码
const defaultOptions = {
  bypassOnDebug: true,
};

②自定义设置

javascript 复制代码
 const customOptions = {
      mozjpeg: {
        progressive: true,
        quality: 50
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.5, 0.65],
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // 不支持WEBP就不要写这一项
      webp: {
        quality: 75
      }
  }

3、在chainWebpack中加入配置:

javascript 复制代码
chainWebpack: config => {
 
    config.module.rule('images') 
        .test(/\.(gif|png|jpe?g|svg)$/i)
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options(customOptions)
        .end() 
 
  }

options中可以切换使用默认还是自定义

二、公共代码抽离:

在configureWebpack加入配置:

javascript 复制代码
configureWebpack: (config) => {
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: "all",
            test: /node_modules/,
            name: "vendor",
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100,
          },
          common: {
            chunks: "all",
            test: /[\\/]src[\\/]js[\\/]/,
            name: "common",
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          styles: {
            name: "styles",
            test: /\.(sa|sc|c)ss$/,
            chunks: "all",
            enforce: true,
          },
          runtimeChunk: {
            name: "manifest",
          },
        },
      },
    };
}

三、对代码进行压缩,并移除控制台输出

1、先下载依赖

javascript 复制代码
npm install uglifyjs-webpack-plugin --save-dev

2、在vue.config.js的第一行引入依赖

javascript 复制代码
const UglifyPlugin = require("uglifyjs-webpack-plugin");

3、在configureWebpack中加入配置:

javascript 复制代码
 config.plugins.push(
      new UglifyPlugin({
        uglifyOptions: {
          //生产环境自动删除console
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ["console.log"],
          },
        },
        sourceMap: false,
        parallel: true,
      })
    );
相关推荐
知识分享小能手22 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one23 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲24 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮2 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常3 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json