vue.config.js中打包相关配置

1.原始篇

let path = require('path');
const webpack = require('webpack');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const { getThemeColors, modifyVars } = require('./src/utils/themeUtil');
const { resolveCss } = require('./src/utils/theme-color-replacer-extend');
const CompressionWebpackPlugin = require('compression-webpack-plugin');// const productionGzipExtensions = ['js', 'css'];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const isProd = process.env.NODE_ENV === 'production';const assetsCDN = {// webpack build externalsexternals: {// vue: 'Vue',// 'vue-router': 'VueRouter',// vuex: 'Vuex',// axios: 'axios',// nprogress: 'NProgress',// clipboard: 'ClipboardJS',// '@antv/data-set': 'DataSet',// 'js-cookie': 'Cookies',// AMap: "window.AMap"},css: [// '//at.alicdn.com/t/font_2338481_gghb7xktb5.css'],js: [// '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',// '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',// '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',// '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',// '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',// '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',// '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',// '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js']
};module.exports = {lintOnSave: false,devServer: {// host: "localhost",open: true,port: 8088,//配置几个跨域接口proxy: {'/v2/city/lookup': {target: 'https://geoapi.qweather.com', //请求城市定位区域接口地址changeOrigin: true, //是否跨域// pathRewrite: {//     '^/api': '' //路径重写// }},'/v7/weather/now': {target: 'https://devapi.qweather.com', //请求指定区域的接口changeOrigin: true,  //是否跨域// pathRewrite: {//     '^/api': '' //路径重写// }}}},pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [path.resolve(__dirname, "./src/theme/theme.less")],}},configureWebpack: config => {config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];config.performance = {hints: false};config.plugins.push(new ThemeColorReplacer({fileName: 'css/theme-colors-[contenthash:8].css',matchColors: getThemeColors(),injectCss: true,resolveCss}));// Ignore all locale files of moment.jsconfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))// 生产环境下将资源压缩成gzip格式if (isProd) {// add `CompressionWebpack` plugin to webpack pluginsconfig.plugins.push(new CompressionWebpackPlugin({algorithm: 'gzip',// test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),test: productionGzipExtensions,threshold: 4096,minRatio: 0.8}))}// if prod, add externalsif (isProd) {config.externals = assetsCDN.externals}},chainWebpack: config => {// 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 if (isProd) {config.plugin('optimize-css').tap(args => {args[0].cssnanoOptions.preset[1].colormin = false;return args})}// 生产环境下使用CDNif (isProd) {config.plugin('html').tap(args => {args[0].cdn = assetsCDN;return args})}},css: {loaderOptions: {less: {lessOptions: {modifyVars: modifyVars(),javascriptEnabled: true}}}},publicPath: './',outputDir: 'distM',assetsDir: '',productionSourceMap: false
};

2.改进篇

let path = require('path');
const webpack = require('webpack');
const ThemeColorReplacer = require('webpack-theme-color-replacer');
const { getThemeColors, modifyVars } = require('./src/utils/themeUtil');
const { resolveCss } = require('./src/utils/theme-color-replacer-extend');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = ["js", "css"];
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const isProd = process.env.NODE_ENV === 'production';const assetsCDN = {// webpack build externalsexternals: {//不需要打包进来的资源// vue: 'Vue',// vuex: 'Vuex',// 'vue-router': 'VueRouter',// axios: 'axios',// nprogress: 'NProgress',// clipboard: 'ClipboardJS',// '@antv/data-set': 'DataSet',// 'js-cookie': 'Cookies',// AMap: "window.AMap"},css: [// '//at.alicdn.com/t/font_2338481_gghb7xktb5.css'],js: [// '//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',// '//cdn.jsdelivr.net/npm/vue-router@3.3.4/dist/vue-router.min.js',// '//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',// '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',// '//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js',// '//cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js',// '//cdn.jsdelivr.net/npm/@antv/data-set@0.11.4/build/data-set.min.js',// '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js']
};
let timeStamp = new Date().getTime();
module.exports = {publicPath: './',outputDir: 'distM',assetsDir: '',productionSourceMap: false, // 是否为生产环境构建生成 source map？lintOnSave: false, //是否开启eslint保存检测,有效值: true || false || 'error'devServer: {// host: "localhost",open: true,port: 8087,overlay: {errors: false,warnings: false},//配置几个跨域接口proxy: {'/v2/city/lookup': {target: 'https://geoapi.qweather.com', //请求城市定位区域接口地址changeOrigin: true, //是否跨域// pathRewrite: {//     '^/api': '' //路径重写// }},'/v7/weather/now': {target: 'https://devapi.qweather.com', //请求指定区域的接口changeOrigin: true,  //是否跨域// pathRewrite: {//     '^/api': '' //路径重写// }}}},pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [path.resolve(__dirname, "./src/theme/theme.less")]}},configureWebpack: config => {config.entry.app = ["babel-polyfill", "whatwg-fetch", "./src/main.js"];config.performance = {hints: false};config.plugins.push(new ThemeColorReplacer({fileName: 'css/theme-colors-[contenthash:8].css',matchColors: getThemeColors(),injectCss: true,resolveCss}));// 生产环境下将资源压缩成gzip格式if (isProd) {// add `CompressionWebpack` plugin to webpack pluginsconfig.plugins.push(// Ignore all locale files of moment.js 2024-01-18new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),new CompressionWebpackPlugin({algorithm: 'gzip',// test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),test: productionGzipExtensions,threshold: 4096, //对4K以上的数据进行压缩minRatio: 0.8,}),/*** 新增限制 2024-01-18* maxChunks：使用大于或等于 1 的值，来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk，这是因为 entry/main chunk 也会包含在计数之中。* minChunkSize: 设置 chunk 的最小大小。* 限制打包的个数(减少打包生成的js文件和css文件)*/new webpack.optimize.LimitChunkCountPlugin({maxChunks: 10,minChunkSize: 100}),)}// if prod, add externalsif (isProd) {config.externals = assetsCDN.externals}},chainWebpack: config => {if (isProd) {// 移除 prefetch 插件config.plugins.delete('prefetch');// 移除 preload 插件config.plugins.delete('preload');// 压缩代码config.optimization.minimize(true);// 分割代码config.optimization.splitChunks({chunks: 'all'});// 生产环境下关闭css压缩的 colormin 项，因为此项优化与主题色替换功能冲突 config.plugin('optimize-css').tap(args => {args[0].cssnanoOptions.preset[1].colormin = false;return args})// 生产环境下使用CDNconfig.plugin('html').tap(args => {args[0].cdn = assetsCDN;return args})}},css: {extract: { // 打包后css文件名称添加时间戳 2024-01-18filename: `css/[name].[hash:8].${timeStamp}.css`,chunkFilename: `css/chunk.[id].[hash:8].${timeStamp}.css`,},loaderOptions: {less: {lessOptions: {modifyVars: modifyVars(),javascriptEnabled: true}}}},// chunks: ['chunk-vendors', 'chunk-common']
};

通过对chunk生成的css和js文件数量和大小做限制，对代码进行压缩和分割，线上生产环境下使用cdn方式等对webpack打包优化。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/637409.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python并发与多线程：并发网络通信模型

Python并发与多线程：并发网络通信模型

在Python中，有多种方式可以实现并发网络通信模型，其中包括多线程、多进程、协程和异步IO等。在本篇中，我们主要讨论多线程实现并发网络通信的方法。 使用多线程可以在一个程序中同时处理多个网络连接，从而提高程序的性能和效率。…
阅读更多...
如何本地部署虚拟数字克隆人 SadTalker

如何本地部署虚拟数字克隆人 SadTalker

环境： Win10 SadTalker 问题描述： 如何本地部署虚拟数字克隆人 SadTalker 解决方案： SadTalker：学习逼真的3D运动系数，用于风格化的音频驱动的单图像说话人脸动画 单张人像图像🙎 ♂️音频&#x1f3…
阅读更多...
伊恩·斯图尔特《改变世界的17个方程》傅里叶变换笔记

伊恩·斯图尔特《改变世界的17个方程》傅里叶变换笔记

主要是课堂的补充（yysy，我觉得课堂的教育模式真有够无聊的，PPT、写作业、考试，感受不到知识的魅力。 它告诉我们什么？ 空间和时间中的任何模式都可以被看作不同频率的正弦模式的叠加。 为什么重要？ 频率分量…
阅读更多...
【图解数据结构】顺序表实战指南：手把手教你详细实现（超详细解析）

【图解数据结构】顺序表实战指南：手把手教你详细实现（超详细解析）

🌈个人主页：聆风吟 🔥系列专栏：图解数据结构、算法模板 🔖少年有梦不应止于心动，更要付诸行动。 文章目录 一. ⛳️线性表1.1 🔔线性表的定义1.2 🔔线性表的存储结构 二. ⛳️顺序表…
阅读更多...
论文阅读_CogTree_推理的认知树

论文阅读_CogTree_推理的认知树

英文名称: From Complex to Simple: Unraveling the Cognitive Tree for Reasoning with Small Language Models中文名称: 从复杂到简单：揭示小型语言模型推理的认知树链接: http://arxiv.org/abs/2311.06754v1代码: https://github.com/alibaba/EasyNLP作者: Junbi…
阅读更多...
OpenCompass大模型测评

OpenCompass大模型测评

一、笔记 为什么大模型需要开展测评? 大模型测评有以下原因： 1、让普通用户了解大模型的能力和特点，选择合适的大模型 2、让开发者了解大模型的能力边界，找到提升的地方 3、让管理机构更了解大模型，减少大模型带来的社会风险 …
阅读更多...
为vs code配置unity开发环境

为vs code配置unity开发环境

1.安装.NET.Core SDK 我们可以访问官网下载安装SDK及tool（https://www.microsoft.com/net/download/core）下载。有的系统只提供了执行文件，没有提供安装包，需要自己做一些配置。 下载好对应的版本就可以安装了，安装好以…
阅读更多...
Video 不支持微信小程序的show-bottom-progress属性

Video 不支持微信小程序的show-bottom-progress属性

原文地址：Video 不支持微信小程序的show-bottom-progress属性-鹭娃网络 相关平台 微信小程序 小程序基础库: 2.20.1使用框架: React 复现步骤 import { Video} from tarojs/components; 渲染一个Video播放视频，无法隐藏手机屏幕最底部的进度条&#…
阅读更多...
【JavaEE】文件操作与IO

【JavaEE】文件操作与IO

作者主页：paper jie_博客 本文作者：大家好，我是paper jie，感谢你阅读本文，欢迎一建三连哦。 本文于《JavaEE》专栏，本专栏是针对于大学生，编程小白精心打造的。笔者用重金(时间和精力)打造&…
阅读更多...
L1-067 洛希极限(Java)

L1-067 洛希极限(Java)

科幻电影《流浪地球》中一个重要的情节是地球距离木星太近时，大气开始被木星吸走，而随着不断接近地木“刚体洛希极限”，地球面临被彻底撕碎的危险。但实际上，这个计算是错误的。 洛希极限（Roche limit）是一…
阅读更多...
【SpringCloud】微服务框架后端部署详细过程记录20240119

【SpringCloud】微服务框架后端部署详细过程记录20240119

前言：前两天公司接到客户提供的一个微服务框架，导师让我在本地部署验证一下该框架的可用性，借此机会记录一下微服务项目的一个基本部署流程，仅供学习参考，如有不足还请指正！ 文件结构 提供的压缩文件共包含…
阅读更多...
IDEA在重启springboot项目时没有自动重新build

IDEA在重启springboot项目时没有自动重新build

IDEA在重启springboot项目时没有自动重新build 问题描述 当项目里面某些依赖或者插件更新了，target的class文件没有找到，导致不是我们需要的效果。 只能手动的清理target文件，麻烦得很 ， 单体项目还好说，一次清理就…
阅读更多...
如何让 Websocket兼容低版本浏览器

如何让 Websocket兼容低版本浏览器

要使WebSocket兼容低版本浏览器，可以使用一些降级策略。以下是一些可能的方法： 使用WebSocket的替代方案：在低版本浏览器中，可以使用一些基于HTTP的长轮询或流技术来实现类似于WebSocket的功能。常见的替代方案包括Comet、SSE&…
阅读更多...
C++从零开始的打怪升级之路(day16)

C++从零开始的打怪升级之路(day16)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前，我学了一点点C语言还有简单的数据结构，如果有小伙伴想和我一起学习的，可以私信我交流分享学习资料 那么开启正题 今天分享的内容是string类的模拟实现 当然string类里面有100多个…
阅读更多...
7、机器学习中的数据泄露（Data Leakage）

7、机器学习中的数据泄露（Data Leakage）

找到并修复这个以微妙的方式破坏你的模型的问题。 数据泄露这个概念在kaggle算法竞赛中经常被提到，这个不同于我们通常说的生活中隐私数据暴露，而是在竞赛中经常出现某支队伍靠着对极个别feature的充分利用，立即将对手超越，成功霸占冠军位置，而且与第二名的差距远超第二名…
阅读更多...
一键搭建你的知识库

一键搭建你的知识库

效果 说明 由于安装包安装需要glibc>2.7 我就不尝试了 因为glib升级是一个繁琐的过程 没有升级的意义 只是为了体验知识库 没必要浪费时间 1.1docker compose部署trilium 1.1.创建目录 mkdir -p /opt/triliumcd /opt/trilium 1.2.编写docker-comppose.yml文件 vim dock…
阅读更多...
【51单片机】矩阵按键

【51单片机】矩阵按键

0、前言 参考&#xff1a;普中 51 单片机开发攻略 1、硬件 2、软件 main.c #include <reg52.h> #include <intrins.h> #include "delayms.h"typedef unsigned int u16; //对数据类型进行声明定义 typedef unsigned char u8; #define GPIO_KEY P1 #d…
阅读更多...
统计学-R语言-7.1

统计学-R语言-7.1

文章目录 前言假设检验的原理假设检验的原理提出假设做出决策表述结果效应量 总体均值的检验总体均值的检验(一个总体均值的检验) 练习 前言 本章主题是假设检验(hypothesis testing)。与参数估计一样&#xff0c;假设检验也是对总体参数感兴趣&#xff0c;如比例、比例间的差…
阅读更多...
3.C语言——函数

3.C语言——函数

函数 1.什么是函数2.函数的分类1.库函数2.自定义函数 3.函数的参数1.实际参数&#xff08;实参&#xff09;2.形式参数&#xff08;形参&#xff09; 4.函数的声明1.同一个文件的函数声明2.多文件的函数声明 5.函数的调用6.函数的嵌套调用和链式访问1.嵌套调用2.链式访问 7.函数…
阅读更多...
基于springboot+vue的校园周边美食探索及分享平台系统(前后端分离)

基于springboot+vue的校园周边美食探索及分享平台系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…
阅读更多...
最新文章

Copyright @ 2022~2023