vue项目打包优化

首先第一步通过浏览器看首次加载的问题大小，时间跨度等方面入手

1. Coverage观察
Coverage是chrome开发者工具的一个新功能，从字面意思上可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行，而哪些js和css是还没有用到的，如图，这是我在打开csdn网页时，所显示的已运行和尚未运行的代码情况。

最右边显示的是我们加载的css和js文件数量，红色区域表示已运行的代码，而青色表示已加载但未运行的代码。可用来发现页面中尚未用到的js 和 css代码，你可以为用户只提供必要的代码，这样就可以提升页面的性能。这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用。
在这里插入图片描述

上面录制的数据中，最大的文件是 vendor.js，如果某个文件覆盖率低（即未使用代码比例很高），通常意味着用户加载了太多不必要的代码（要么真的是无用代码，要么是当前时点还没执行到的代码），有性能常识的同学不难推断出，这会导致页面的完全加载时间、或单页应用的启动时间变慢，在慢速网络下的性能损耗会尤其明显；此外，更多代码的解析、编译也就意味着更多的硬件资源消耗，在低端设备上也会存在明显的性能问题。
以 Coverage 数据为参考，我们能了解页面重无用代码的比例到底有多大。现实世界中，很多工程师可能是在遗留代码库上工作，并且遗留代码库存在的时间还很长，那么很可能这个代码库中存在大量的无用代码，但是谁也不敢删除他们，因为 JS 这门语言的动态性，你不能粗暴的把哪些看起来“没有被使用”的代码直接删掉，除非你很清楚所有的代码执行路径，很显然这对于大型应用或者遗留代码库来说是不现实的。
怎么移除死代码呢？我们可以依赖打包工具，比如 UglifyJS 在压缩代码时支持直接删除死代码的配置项。而 Webpack 2 中引入了 Tree Shaking 的特性，能够自动把项目中没有用到的代码从打包中去掉，但是这种优化仅限于被 export 的代码。总而言之，死代码要尽可能想办法去掉，Coverage 工具能提供一个判断基准。

2. webpack-bundle-analyzer：查看资源树

cnpm i webpack-bundle-analyzer
chainWebpack: config => {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)}

运行 npm run build --report
在这里插入图片描述

基本上可以看到整个项目包结构，接下来针对我们的项目开始进行瘦身减肥操作

1. productionSourceMap:false
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建，如果特殊情况，生产环境上面报错了，为了方便定位问题，可以设置为true，他可以打包出一份源码出来，方便我们定位生产环境上面的问题。不过一般情况下是false

 productionSourceMap: process.env.NODE_ENV !== 'production',

2. 路由懒加载

import ShowBlogs from '@/components/ShowBlogs'
routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')

3. 将打包的文件进行切割分包，方便加载的时候能多路加载

// 源(asset)和入口起点超过指定文件限制 会有警告 打包时可以 去掉这个提示config.performance = {// 入口起点的最大体积maxEntrypointSize: 5000000,// 生成文件的最大体积maxAssetSize: 3000000,// hints: 'warning',   // 超出大小之后的警告hints: false}

4. webpack ContextReplacementPlugin插件
如果项目里面涉及到momen locale zh-cn等可以通过webpack ContextReplacementPlugin插件
webpack 打包momentjs时会把所有语言包都打包，这样会使打包文件很大。此插件可以帮助我们只打包需要的语言包，大大减小打包文件大小。

 config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/))

5.开启缓存，多线程编译

config.optimization.minimizer.push(new UglifyJsPlugin({uglifyOptions: {warnings: false,cache: true, // 开启缓存parallel: true, // 开启多线程编译compress: {drop_console: true,pure_funcs: ['console.log']}}}))

6. 对打包文件进行切割，控制加载文件个数，缓存已经打包的文件，避免重复打包

config.optimization.splitChunks({chunks: 'all', // async异步代码分割 initial同步代码分割 all同步异步分割都开启minSize: 30000, // 字节引入的文件大于30kb才进行分割// maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件minChunks: 1, // 模块至少使用次数maxAsyncRequests: 5, // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符name: true, // 缓存组里面的filename生效，覆盖默认命名cacheGroups: {// 缓存组，将所有加载模块放在缓存里面一起分割打包common: {// 默认打包模块priority: 1,reuseExistingChunk: true // 模块嵌套引入时，判断是否复用已经被打包的模块// filename: 'common.js'},vendors: {test: /[\\/]node_modules[\\/]/,priority: 2// filename: 'vendors.js'}}})

7. 关闭Prefetch
因为vuecli 3默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容
在首屏会把这十几个路由文件，都一口气下载了
所以我们要关闭这个功能，在vue.config.js中设置

// 移除 preload 插件 （去除默认预加载）config.plugins.delete('preload')
config.plugins.delete('prefetch')

8. 针对图片进行优化，大于10kb的正常加载，小于10kb的进行baseurl转换，可以提升浏览器初始化加载的效率

// 编译图片config.module.rule('images').test(/\.(png|jpeg|gif|jpg)$/).use('url-loader').loader('url-loader').options({limit: 1024 * 10, // 小于10k的图片采用baseurl，大于和等于10k的就正常打包成图片name: 'static/[name].[ext]'})

9. 针对css是否开始source map

 sourceMap: process.env.NODE_ENV === 'production', // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能

10. 配置babel.config.js文件进行按需加载

 plugins: ["@babel/plugin-proposal-optional-chaining", // 可选链 ?.'@babel/plugin-proposal-nullish-coalescing-operator',  //空值合并 ??["import",{libraryName: ["ant-design-vue"],libraryDirectory: "es",style: "css"},]]

11. 对发布生产环境的时候开启gzip压缩

 if (process.env.NODE_ENV === 'production') {config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less|html)$/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false, // 不删除源文件algorithm: 'gzip',minRatio: 0.8}))}

下面是整个vue.config.js的配置代码

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')
// const { options } = require('less')function resolve(dir) {return path.join(__dirname, dir)
}module.exports = {outputDir: 'dist', // 目录的内容在构建之前会被清除// qiankuan打包时放开// 多入口配置// pages: {//   index: {//     entry: 'src/main.js',//     template: 'public/index.html',//     filename: 'index.html',//   }// },publicPath: '/', //根路径 cli3.0以上使用publicPath替代baseUrzl,解决build后找不到静态资源的问题productionSourceMap: process.env.NODE_ENV !== 'production', // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。lintOnSave: process.env.NODE_ENV !== 'production', //生产构建时禁用 eslint-loader,它的有效值为 'warning' | 'default' | 'error'assetsDir: 'assets', // 放置生成静态资源的目录configureWebpack: config => {// console.log(process.env.NODE_ENV, '--------')config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/))// 生产环境取消 console.logif (process.env.NODE_ENV === 'production') {// config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true// 为生产环境修改配置config.mode = 'production'// 源(asset)和入口起点超过指定文件限制 会有警告 打包时可以 去掉这个提示config.performance = {// 入口起点的最大体积maxEntrypointSize: 5000000,// 生成文件的最大体积maxAssetSize: 3000000,// hints: 'warning',   // 超出大小之后的警告hints: false}config.plugins.push(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/))config.optimization.minimizer.push(new UglifyJsPlugin({uglifyOptions: {warnings: false,cache: true, // 开启缓存parallel: true, // 开启多线程编译compress: {drop_console: true,pure_funcs: ['console.log']}}}))// config.output = {}}},chainWebpack: config => {// 移除prefetch插件，此插件是用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容//因为vuecli 3默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容在首屏会把这十几个路由文件，都一口气下载了config.plugins.delete('prefetch')config.resolve.alias.set('@$', resolve('src')).set('@api', resolve('src/api')).set('@assets', resolve('src/assets')).set('@comp', resolve('src/components')).set('@views', resolve('src/views'))// .set('@ant-design/icons/lib/dist$', resolve('src/icons.js'))config.optimization.splitChunks({chunks: 'all', // async异步代码分割 initial同步代码分割 all同步异步分割都开启minSize: 30000, // 字节引入的文件大于30kb才进行分割// maxSize: 50000,         //50kb，尝试将大于50kb的文件拆分成n个50kb的文件minChunks: 1, // 模块至少使用次数maxAsyncRequests: 5, // 同时加载的模块数量最多是5个，只分割出同时引入的前5个文件maxInitialRequests: 3, // 首页加载的时候引入的文件最多3个automaticNameDelimiter: '~', // 缓存组和生成文件名称之间的连接符name: true, // 缓存组里面的filename生效，覆盖默认命名cacheGroups: {// 缓存组，将所有加载模块放在缓存里面一起分割打包common: {// 默认打包模块priority: 1,reuseExistingChunk: true // 模块嵌套引入时，判断是否复用已经被打包的模块// filename: 'common.js'},vendors: {test: /[\\/]node_modules[\\/]/,priority: 2// filename: 'vendors.js'}}})// 移除 preload 插件 （去除默认预加载）config.plugins.delete('preload')// 移除 prefetch 插件 （去除默认预加载）config.plugins.delete('prefetch')// 生产环境，开启js\css压缩if (process.env.NODE_ENV === 'production') {// 查看线上打包文件大小config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)config.plugin('compressionPlugin').use(new CompressionPlugin({test: /\.(js|css|less)$/, // 匹配文件名threshold: 10240, // 对超过10k的数据压缩deleteOriginalAssets: false, // 不删除源文件algorithm: 'gzip',minRatio: 0.8}))}// 更改配置// 配置 webpack 识别 markdown 为普通的文件config.module.rule('markdown').test(/\.md$/).use().loader('file-loader').options({name: 'img/[name].[hash:8].[ext]',esModule: false // 这里设置为false}).end()// 编译vxe-table包里的es6代码，解决IE11兼容问题config.module.rule('vxe').test(/\.js$/).include.add(resolve('node_modules/vxe-table')).add(resolve('node_modules/vxe-table-plugin-antd')).end().use().loader('babel-loader').end()// 编译图片config.module.rule('images').test(/\.(png|jpeg|gif|jpg)$/).use('url-loader').loader('url-loader').options({limit: 1024 * 10, // 小于10k的图片采用baseurl，大于和等于10k的就正常打包成图片name: 'static/[name].[ext]'})},css: {sourceMap: process.env.NODE_ENV === 'production', // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能// extract: {//   ignoreOrder: true //process.env.NODE_ENV === 'production' // 在生产环境下默认就是true的，在开发环境下为false，而且如果在开发环境下改为true的话，热更新就不好使了// },loaderOptions: {less: {modifyVars: {/* less 变量覆盖，用于自定义 ant design 主题 */'primary-color': '#F5222D','link-color': '#F5222D','border-radius-base': '4px'},javascriptEnabled: true}}},devServer: {// 设置让浏览器 overlay 同时显示警告和错误overlay: {warnings: true,errors: true},port: 10086,proxy: {/* 注意：jeecgboot前端做了改造，此处不需要配置跨域和后台接口（只需要改.env相关配置文件即可）issues/3462 很多人此处做了配置，导致刷新前端404问题，请一定注意 */[process.env.VUE_API_FIX]: {// target: process.env.VUE_APP_API_BASE_URL,target: 'http://172.16.1.211:10081',ws: false,changeOrigin: true}}}
}

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

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

相关文章

【刷题】2023年第十四届蓝桥杯大赛软件类省赛C/C++大学A组真题

【刷题】2023年第十四届蓝桥杯大赛软件类省赛C/C++大学A组真题

蓝桥杯2023年第十四届省赛真题-平方差 - C语言网 (dotcpp.com) 初步想法，x y2 − z2（yz)(y-z) 即xa*b，ayz，by-z 2yab 即ab是2的倍数就好了。 即x存在两个因数之和为偶数就能满足条件。 但时间是（r-l）*x&am…
阅读更多...
【算法挨揍日记】day06——1004. 最大连续1的个数 III、1658. 将 x 减到 0 的最小操作数

【算法挨揍日记】day06——1004. 最大连续1的个数 III、1658. 将 x 减到 0 的最小操作数

1004. 最大连续1的个数 III 1004. 最大连续1的个数 III 题目描述： 给定一个二进制数组 nums 和一个整数 k，如果可以翻转最多 k 个 0 ，则返回 数组中连续 1 的最大个数 。 解题思路： 首先题目要我们求出的最多翻转k个0后&#x…
阅读更多...
2023华为杯数模C题——大规模创新类竞赛评审方案研究

2023华为杯数模C题——大规模创新类竞赛评审方案研究

B题——大规模创新类竞赛评审方案研究 思路：采用数据分析等手段改进评分算法性能 完成情况(1-2问已经完成) 代码下载 问题一 在每个评审阶段，作品通常都是随机分发的，每份作品需要多位评委独立评审。为了增加不同评审专家所给成绩之间的可比…
阅读更多...
Android ANR日志分析

Android ANR日志分析

会造成ANR的场景： Service Timeout：前台服务在20s内未执行完成，后台为200s； BroadcastQueue Timeout：前台广播在10s内未执行完成，后台为60s； ContentProvider Timeout：内容提供者在…
阅读更多...
SAP Oracle表空间扩展技术手册

SAP Oracle表空间扩展技术手册

1、DBACOCKPIT下查看表空间 当表空间不足（达到99%）时，需要按以下步骤扩充表空间（每次扩充20000M，20G）： （也可以通过DB13,DB02查看表空间） 新浪博客 Tablespace PSAPSR3 is 100% used | SAP Community Oracle是通过增加数据文件的方式来为表空间扩容。为指定表空间增…
阅读更多...
BST搜索二叉树

BST搜索二叉树

目录 二叉搜索树概念 ​编辑 1 二叉搜索树的构建 2. 二叉搜索树的删除 3二叉搜索树中放入元素 4. 二叉搜索树中元素的删除 5. 二叉搜索树中元素的遍历 6 二叉搜索树中元素的查找 7二叉搜索树的拷贝构造 二叉搜索树概念 二叉搜索树又称二叉排序树，它或者是一…
阅读更多...
WeCanStudio工具套件介绍

WeCanStudio工具套件介绍

直接上视频,在超燃的《天马座幻想》的背景音乐下，再次了解一下该工具套件吧。 WeCanStudio开发套件介绍
阅读更多...
LeetCode(力扣)96. 不同的二叉搜索树Python

LeetCode(力扣)96. 不同的二叉搜索树Python

LeetCode96. 不同的二叉搜索树 题目链接代码 题目链接 https://leetcode.cn/problems/unique-binary-search-trees/description/ 代码 class Solution:def numTrees(self, n: int) -> int:dp [0] * (n 1)dp[0] 1for i in range(1, n 1):for j in range(1, i 1):dp[…
阅读更多...
基于华为云云耀云服务器L实例开展性能评测｜MySQL性能测评

基于华为云云耀云服务器L实例开展性能评测｜MySQL性能测评

基于华为云云耀云服务器L实例开展性能评测｜MySQL性能测评 1. 测试环境介绍2. 测试环境搭建3. 测试工具3.1. mysqlslap3.2. sysbench 1. 测试环境介绍 随着云计算时代的进一步深入，越来越多的中小企业企业与开发者需要一款简单易用、高能高效的云计算基础…
阅读更多...
C++核心编程——P45-52继承

C++核心编程——P45-52继承

继承 继承是面向对象三大特性之一 有些类与类之间存在特殊的关系，例如下图中: 我们发现，定义这些类的时候，下级别的成员除了拥有上一级的共性，还有自己的特性。 这时候我们就可以考虑利用继承的技术，减少重复代码量…
阅读更多...
【一、虚拟机vmware安装】

【一、虚拟机vmware安装】

安装虚拟机 下载 官方下载地址：https://www.vmware.com/cn.html 大概流程就是，最重要的事最后一步
阅读更多...
【WSN】基于蚁群算法的WSN路由协议(最短路径)消耗节点能量研究（Matlab代码实现）

【WSN】基于蚁群算法的WSN路由协议(最短路径)消耗节点能量研究（Matlab代码实现）

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…
阅读更多...
【初阶数据结构】二叉树全面知识总结

【初阶数据结构】二叉树全面知识总结

二叉树详解 树的概念及其结构树的概念树的相关概念树的表示方法孩纸兄弟表示法双亲表示法（并查集） 树的实际应用 二叉树二叉树的概念二叉树的种类二叉树的性质二叉树的存储结构 二叉树顺序结构的实现堆的概念及结构堆向上、向下调整法堆的插入堆的删除堆…
阅读更多...
YOLOv5如何训练自己的数据集

YOLOv5如何训练自己的数据集

文章目录 前言1、数据标注说明2、定义自己模型文件3、训练模型4、参考文献 前言 本文主要介绍如何利用YOLOv5训练自己的数据集 1、数据标注说明 以生活垃圾数据集为例子 生活垃圾数据集（YOLO版）点击这里直接下载本文生活垃圾数据集 生活垃圾数据集组成&…
阅读更多...
[Linux入门]---初识冯诺依曼体系

[Linux入门]---初识冯诺依曼体系

文章目录 1.背景知识2.冯诺依曼体系结构 1.背景知识 冯诺依曼（John von Neumann），被称为“计算机之父”，确定了计算机的体系结构——即“冯诺依曼结构”；我们常见的计算机，如笔记本。我们不常见的计算机&am…
阅读更多...
蓝桥杯每日一题2023.9.23

蓝桥杯每日一题2023.9.23

4961. 整数删除 - AcWing题库 题目描述 分析 注：如果要进行大量的删除操作可以使用链表 动态求最小值使用堆，每次从堆中取出最小值的下标然后在链表中删除 注意long long 代码解释： while(k --){auto t q.top();q.pop();res t.first;i…
阅读更多...
经典题记录 字符串相加/相乘

经典题记录 字符串相加/相乘

1. LeetCode 415 字符串相加 代码一：代码简短，但需要借助额外的一个string来保存结果，更占用内存。 class Solution { public:string addStrings(string num1, string num2) {string ans"";int size1num1.size();int size2num2.si…
阅读更多...
qt 6知识集

qt 6知识集

1.Use multi-arg instead [clazy-qstring-arg] 存在过个arg，连写形式如下： QString("%1 %2").arg(a).arg(b);QString("%1 %2").arg(a, b); // one less temporary heap allocation详见参考文献[1]。 2.widget运行后正常打开却看不…
阅读更多...
基于Java的酒店管理系统

基于Java的酒店管理系统

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

Three.js后期处理简明教程

后期处理（Post Processing）通常是指对 2D 图像应用某种效果或滤镜。 在 THREE.js 中我们有一个包含一堆网格物体的场景。 我们将该场景渲染为 2D 图像。 通常，该图像会直接渲染到画布中并显示在浏览器中，但我们可以将其渲染到渲染…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023