vue-cli4打包最强优化（10M变300kb）

2401_84152140

于 2024-05-14 11:43:41 发布

阅读量419

点赞数 3

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84152140/article/details/138848033

版权

程序员专栏收录该内容

187 篇文章 0 订阅

订阅专栏

}

去除sourceMap前后对比，减少了很大体积。

前：dist大小为7M

后：dist大小为3M

二、去除console.log打印以及注释

下载插件

cnpm install uglifyjs-webpack-plugin --save-dev

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

const isProduction = process.env.NODE_ENV === ‘production’;

configureWebpack: config => {

const plugins = [];

if (isProduction) {

plugins.push(

new UglifyJsPlugin({

uglifyOptions: {

output: {

comments: false, // 去掉注释

warnings: false,

compress: {

drop_console: true,

drop_debugger: false,

pure_funcs: [‘console.log’]//移除console

}

})

)

}

结论：重新打包，dist体积减少并不大。因为congsole.log()以及注释并不会占用太多体积（也就10-30kb）

三、使用CDN 加速优化

cdn优化是指把第三方库比如（vue，vue-router，axios）通过cdn的方式引入项目中，这样vendor.js会显著减少，并且大大提升项目的首页加载速度，下面是具体操作：

在这里插入图片描述

const isProduction = process.env.NODE_ENV === ‘production’;

// externals

const externals = {

vue: ‘Vue’,

‘vue-router’: ‘VueRouter’,

vuex: ‘Vuex’,

vant: ‘vant’,

axios: ‘axios’

}

// CDN外链，会插入到index.html中

const cdn = {

// 开发环境

dev: {

css: [],

js: []

// 生产环境

build: {

css: [‘https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css’],

js: [

‘https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js’,

‘https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js’,

‘https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js’,

‘https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js’,

‘https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js’

]

}

module.exports = {

configureWebpack: config => {

// 为生产环境修改配置…

if (isProduction) {

// externals

config.externals = externals

}

chainWebpack: config => {

/**

添加CDN参数到htmlWebpackPlugin配置中

config.plugin(‘html’).tap(args => {

if (isProduction) {

args[0].cdn = cdn.build

} else {

args[0].cdn = cdn.dev

}

return args

})

}

在 public/index.html 中添加

<% for (var i in

htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>

<% } %>

<% for (var i in

htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>

<% } %>

总结：配置了cdn引入，1.1M体积较少到660kb。效果很明显。

四、对资源文件进行压缩

需要下载 compression-webpack-plugin

cnpm i compression-webpack-plugin -D

vue.config.js 中按照如下方式进行配置：

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’)

module.exports = {

// 根据你的实际情况更改这里

publicPath,

assetsDir: ‘assets’,

lintOnSave: true,

configureWebpack: {

plugins:[

new CompressionWebpackPlugin({

filename: ‘[path].gz[query]’,

algorithm: ‘gzip’,

// test: /.js $|\.html$ |.json$|.css/,

test: /.js $|\.json$ |.css/,

threshold: 10240, // 只有大小大于该值的资源会被处理

minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理

// deleteOriginalAssets: true // 删除原文件

})

}

压缩后也会节省一部分空间，单后端要对nginx修改，配合前端

nginx配置示例：

location ~ .*.(js|json|css)$ {

gzip on;

gzip_static on; # gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。

gzip_min_length 1k;

gzip_http_version 1.1;

gzip_comp_level 9;

gzip_types text/css application/javascript application/json;

root /dist;

}

压缩前后大小大致如下：

在这里插入图片描述

可以看到相应头中存在 Content-Encoding:gzip 表示已经配置成功

在这里插入图片描述

五、图片压缩

一张图片压缩前后对比：

在这里插入图片描述

需要下载 image-webpack-loader

npm install image-webpack-loader --save-dev

module.exports = {

// 根据你的实际情况更改这里

publicPath,

assetsDir: ‘assets’,

lintOnSave: true,

// image 压缩定义在chainWebpack中

chainWebpack: config => {

config.module

.rule(‘images’)

.use(‘image-webpack-loader’)

.loader(‘image-webpack-loader’)

.options({

bypassOnDebug: true

})

.end()}

}

此插件容易下载失败，导致运行报错

若安装过 image-webpack-loader 先卸载

//npm 安装的npm 则npm 移除

npm uninstall image-webpack-loader

//如果yarn安装的，则yarn 移除

yarn remove image-webpack-loader

2、使用 cnpm , 这一步意思就是安装 cnpm 然后将全局的 registry 设置成阿里的镜像，国内阿里比较快

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

3、使用 cnpm 安装 image-webpack-loader 会发现很快就安装好了，【手动滑稽】

cnpm install --save-dev image-webpack-loader

六、只打包改变的文件

const { HashedModuleIdsPlugin } = require(‘webpack’);

configureWebpack: config => {

const plugins = [];

plugins.push(

new HashedModuleIdsPlugin()

)

}

七、公共代码抽离

如何提取公共代码？

从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分

splitChunks: {

chunks: "async”,//默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css

minSize: 30000, //表示在压缩前的最小模块大小,默认值是30kb

minChunks: 1, // 表示被引用次数，默认为1；

maxAsyncRequests: 5, //所有异步请求不得超过5个

maxInitialRequests: 3, //初始话并行请求不得超过3个

automaticNameDelimiter:'_{',//名称分隔符，默认是}

cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例

common: {

chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取

test(module, chunks) { //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。自己尝试过程中发现不能提取出css，待进一步验证。

priority: 10, //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中

minChunks: 2, //最少被几个chunk引用

reuseExistingChunk: true，// 如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码

enforce: true // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize

}

公共模块抽离

举例：

项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件， page1.js 和

page2.js中同时都引用了a.js, b.js，这时候想把a.js, b.js抽离出来合并成一个公共的js，然后在page1,page2中自动引入这个公共的js，怎么配置呢？

第三方模块抽离

页面中有时会引入第三方模块，比如import $ from ‘jquery’;

page1中需要引用，page2中也需要引用，这时候就可以用vendor把jquery抽离出来，

如下：

// 公共代码抽离

configureWebpack: config => {

//…

//优化项配置

config.optimization = {

splitChunks: { // 分割代码块

cacheGroups: {

vendor: {//第三方库抽离

chunks: ‘all’,

test: /node_modules/,

minChunks: 1,//在分割之前，这个代码块最小应该被引用的次数

maxInitialRequests: 5,

minSize: 0,//大于0个字节

priority: 100//权重

common: { //公用模块抽离

chunks: ‘all’,

test: /[\/]src[\/]js[\/]/,

minChunks: 2,在分割之前，这个代码块最小应该被引用的次数

maxInitialRequests: 5,

minSize: 0,//大于0个字节

priority: 60

styles: { //样式抽离

test: /.(sa|sc|c)ss$/,

chunks: ‘all’,

enforce: true

runtimeChunk: {

}

八、配置打包分析

安装`cnpm i webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin

module.exports = {

chainWebpack: config => {

// 打包分析

if (IS_PROD) {

config.plugin(‘webpack-report’).use(BundleAnalyzerPlugin, [

{

analyzerMode: ‘static’

}

])

}

九、骨架屏

安装插件npm install vue-skeleton-webpack-plugin

在src下新建Skeleton文件夹，其中新建index.js以及index.vue，在其中写入以下内容，其中，骨架屏的index.vue页面样式请自行编辑

index.js

import Vue from ‘vue’

import home from ‘./index.vue’

import list from ‘./list.vue’

export default new Vue({

components: {

home,

list

})

index.vue(骨架屏页面) list.vue同理

vue.config.js 配置

//骨架屏渲染

const SkeletonWebpackPlugin = require(‘vue-skeleton-webpack-plugin’)

//path引入

const path = require(‘path’)

//configureWebpack模块中写入内容

// 骨架屏渲染

config.plugins.push(new SkeletonWebpackPlugin({

webpackConfig: {

entry: {

app: path.join(__dirname, ‘./src/Skeleton/index.js’),

minimize: true,

quiet: true,

// 如果不设置那么所有的路由都会共享这个骨架屏组件

router: {

mode: ‘hash’,

// 给对应的路由设置对应的骨架屏组件，skeletonId的值根据组件设置的id

routes: [

{ path: ‘/home’, skeletonId: ‘home’ },

{ path: ‘/list’, skeletonId: ‘list’ },

]

}))

七、完整配置

vue.config.js完整配置

const path = require(‘path’);

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’) // 去掉注释

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’); // 开启压缩

const { HashedModuleIdsPlugin } = require(‘webpack’);

function resolve(dir) {

return path.join(__dirname, dir)

}

const isProduction = process.env.NODE_ENV === ‘production’;

// cdn预加载使用

const externals = {

‘vue’: ‘Vue’,

‘vue-router’: ‘VueRouter’,

‘vuex’: ‘Vuex’,

‘axios’: ‘axios’,

“element-ui”: “ELEMENT”

}

const cdn = {

// 开发环境

dev: {

css: [

‘https://unpkg.com/element-ui/lib/theme-chalk/index.css’

js: []

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
.join(__dirname, dir)

}

const isProduction = process.env.NODE_ENV === ‘production’;

// cdn预加载使用

const externals = {

‘vue’: ‘Vue’,

‘vue-router’: ‘VueRouter’,

‘vuex’: ‘Vuex’,

‘axios’: ‘axios’,

“element-ui”: “ELEMENT”

}

const cdn = {

// 开发环境

dev: {

css: [

‘https://unpkg.com/element-ui/lib/theme-chalk/index.css’

js: []

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-gPVCQZCN-1715658209598)]

[外链图片转存中…(img-MoKXaVdV-1715658209598)]

[外链图片转存中…(img-SHyYtHNg-1715658209599)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84152140

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue-cli4打包最强优化（10M变300kb）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫