vue打包篇-分析包数据再进行CDN配置图片文件压缩等优化

前言

vue程序代码写完了，不做任何优化，发现包有点大，为此我们需要分析打包文件中都有些什么。才能对症下药。主要是因为博主当初的服务器才1M带宽........1M

该Demo为vue3.0的~

查看包文件

这个没有优化过的包

首先，修改我们的 package.json 文件

然后执行打包命令

npm run build

我们会发现多了一个 report.html，打开他

加载时长

分析

vue-cli的打包策略是将node_module中的包打包成一个chunk-vendors.js 其他的js 如assets中的打包成app.js。

现在我们需要：

1、尽量减小打包的大小，可采用CDN方式加载；

2、将包打包成压缩包并且配置好nginx压缩功能；

configureWebpack 通过操作对象的形式，来修改默认的webpack配置，该对象将会被 webpack-merge 合并入最终的 webpack 配置
chainWebpack 通过链式编程的形式，来修改默认的webpack配置

/** @Author: Penk* @LastEditors: Penk* @LastEditTime: 2020-11-05 10:09:37* @FilePath: \penk-web-master\Vue.config.js*/
const path = require('path');
const webpack = require('webpack');

function resolve(dir) {return path.join(__dirname, dir)
}
//config/index.js
const os = require('os');

// 动态设置IP，多网卡，需要配置正则表达式 如下方
// (/^192.168.1.*&/).test(alias.address)) 即表示192.168.1.1 网段
function getNetworkIp() {let needHost = ''; // 打开的hosttry {// 获得网络接口列表let network = os.networkInterfaces();for (let dev in network) {let iface = network[dev];console.log(iface)for (let i = 0; i < iface.length; i++) {let alias = iface[i];if (alias.family === 'IPv4' &&alias.address !== '127.0.0.1' &&!alias.internal &&(/^192.168.1.(\d+)$/).test(alias.address)) {needHost = alias.address;}}}} catch (e) {needHost = 'localhost';}return needHost;
}

// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

// 本地环境是否需要使用cdn
const devNeedCdn = true;

// cdn链接
const cdn = {// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）// externals中的key是用于import，// value表示的在全局中访问到该对象，就是window.echartsexternals: {vue: 'Vue',vuex: 'Vuex','vue-router': 'VueRouter','element-ui': 'ELEMENT','echarts': 'echarts','moment': 'moment','mavon-editor': 'MavonEditor','jquery': '$','tinymce': 'tinymce',},// cdn的css链接css: [,'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css','https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/display.css','https://unpkg.com/mavon-editor@2.7.7/dist/css/index.css','https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'],// cdn的js链接js: ['https://cdn.staticfile.org/vue/2.6.11/vue.min.js','https://cdn.staticfile.org/vuex/3.1.2/vuex.min.js','https://cdn.staticfile.org/vue-router/3.1.5/vue-router.min.js','https://unpkg.com/element-ui@2.13.2/lib/index.js','https://unpkg.com/echarts@4.9.0/dist/echarts.min.js','https://cdn.bootcss.com/moment.js/2.20.1/moment.min.js','https://cdn.bootcss.com/moment.js/2.20.1/locale/zh-cn.js','https://unpkg.com/mavon-editor@2.7.7/dist/mavon-editor.js','https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js','https://cdn.bootcss.com/tinymce/5.2.0/tinymce.min.js']
}

module.exports = {pwa: {iconPaths: {favicon32: 'favicon.ico',favicon16: 'favicon.ico',appleTouchIcon: 'favicon.ico',maskIcon: 'favicon.ico',msTileImage: 'favicon.ico'}},productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,publicPath: process.env.NODE_ENV === 'production' ? './' : '/',outputDir: 'penk-web-master-dist',lintOnSave: false, //是否开启eslint保存检测 ,它的有效值为 true || false || 'error'\css: {extract: false},devServer: {open: true,host: getNetworkIp(),port: 8886,proxy: {'/server': { //这里最好有一个 /// target: 'http://192.168.1.150:3000', // 后台接口域名target: 'http://localhost:9500', // 后台接口域名ws: true, //如果要代理 websockets，配置这个参数// secure: false, // 如果是https接口，需要配置这个参数changeOrigin: true, //是否跨域pathRewrite: {'^/server': ''}}}},chainWebpack: config => {// ============压缩图片 start============config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug: true}).end()
// ============压缩图片 end============
// ============注入cdn start============config.plugin('html').tap(args => {// 生产环境或本地需要cdn时，才注入cdnif (isProduction || devNeedCdn) args[0].cdn = cdnreturn args})// ============注入cdn start============
// ============别名 start============config.resolve.alias.set('@', resolve('src'))// ============别名 start============},configureWebpack: config => {
config.devtool = 'source-map'
// 全局引入JQueryconfig.plugins.push(new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery",jquery: "jquery","windows.jQuery": "jquery","windows.jquery": "jquery"}))
// 用cdn方式引入，则构建时要忽略相关资源if (isProduction || devNeedCdn) config.externals = cdn.externals
// 生产环境相关配置if (isProduction) {// 代码压缩config.plugins.push(new UglifyJsPlugin({uglifyOptions: {//生产环境自动删除consolecompress: {drop_debugger: true,drop_console: true,pure_funcs: ['console.log']},warnings: false, // 若打包错误，则注释这行},sourceMap: process.env.NODE_ENV === 'production' ? false : true,parallel: true}))
// gzip压缩const productionGzipExtensions = ['html', 'js', 'css']config.plugins.push(new CompressionWebpackPlugin({// filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240, // 只有大小大于该值的资源会被处理 10240minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理deleteOriginalAssets: false // 删除原文件，不用删除也可以，会优先传递压缩文件}))
// 公共代码抽离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'}}}}}}
}

比较

通过下图，可发现各包体积减小了

部分包已经采用CDN方式加载

本地加载的包，已经通过压缩的方式传递

额外Bug（图片压缩）

npm安装的image-webpack-loader会报错，哪怕你用了nrm设置了国内镜像~~~

# 使用npm安装的 image-webpack-loader在编译的时候会有问题，不信可以试试
npm install --save-dev  image-webpack-loader
npm run build

# 安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org

# cnpm : 无法加载文件 D:\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本
# 运行cnpm会产生问题，所以需要配置一下权限
# 打开powershell

# 管理员授权
Start-Process powershell -Verb runAs
# 继续重新执行set-ExecutionPolicy RemoteSigned 选择 Y

# 安装
cnpm install --save-dev  image-webpack-loader
# 编译
npm run build

vue打包篇-分析包数据再进行CDN配置图片文件压缩等优化相关推荐

分析RM970 固件V2.5版本的图片文件列表
--在RM970的早期固件版本中,我们是可以按照自己的意愿对其进行固件美化的,网上有很多这方面的教程.(例如:http://bbs.romman.net/thread-112858-1-1.html) ...
PDF文件压缩和优化的原理是什么？看了这篇C#案例实践就知道了
这篇是我初步选择的几个可优化压缩的截图一.类库的引入 using Pdftools.Pdf; using Pdftools.PdfOptimize; // DLL文件这里下载 https://www ...
vue打包上线部分css效果错乱,解决Vue打包上线之后部分CSS不生效的问题
解决Vue打包上线之后部分CSS不生效的问题首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: ...
vue打包后图片路径错误
2019独角兽企业重金招聘Python工程师标准>>> 错误原因 vue-cli中将图片资源路径放到了src的assets中,引入图片路径写的相对路径,打包发生错误首先,出错点在u ...
VUE打包目录自定义
新接手VUE项目,因为项目需要,我们要按照之前的项目结构打包,VUE自动生成的打包目录结构不符合要求. 1.dist目录不能用,导致每次打包需要将dist文件夹重新命名,如果要修改打包后文件的目录,需 ...
vue项目打包文件大小分析
vuecli3.0项目搭建与webpack-bundle-analyzer分析首先说一下vuecli低版本与cli3.0的项目结构的区别少了build config 文件夹如果需要进行webp ...
网站逆向分析-vue打包后的网站数据获取
目前来说网站开发主要有三种方向原生js或者jQuery vue,react,angular等框架 WebAssembly wasm目前除了游戏引擎打包出来之外,我还没有见到其他的应用,所以暂时不讨论 ...
vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
前端清单之Vue.js篇
2019独角兽企业重金招聘Python工程师标准>>> 教程实践基于 Vue 与 DeepStream 构建实时 CRUD 应用:Vue 是专注于 JavaScript UI 的渐 ...
vue打包压缩使用gzip
本文介绍使用 CompressionWebpackPlugin 来进行对vue项目的打包文件压缩首先 npm i -D compression-webpack-plugin 下载compressio ...

vue打包篇-分析包数据再进行CDN配置图片文件压缩等优化

vue打包篇-分析包数据再进行CDN配置图片文件压缩等优化相关推荐

最新文章

热门文章