Vue项目打包优化_umi minimize true

最新推荐文章于 2024-09-25 11:24:51 发布

2401_87029792

最新推荐文章于 2024-09-25 11:24:51 发布

阅读量732

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_87029792/article/details/142085574

版权

],
// cdn的js链接
js: [
    'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
    'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
    'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
    'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
]

}

module.exports = {
chainWebpack: config => {
// 注入cdn start
config.plugin(‘html’).tap(args => {
// 生产环境或本地需要cdn时，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// 注入cdn start
},
configureWebpack: config => {
// 用cdn方式引入，则构建时要忽略相关资源
if (isProduction || devNeedCdn) config.externals = cdn.externals
}
}

<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>

<% } %>

<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>

<% } %>


#### 3.代码压缩


`安装插件 npm i -D uglifyjs-webpack-plugin`

// 代码压缩
//在configureWebpack中加入
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)
// 代码压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: [‘console.log’]
}
},
sourceMap: false,
parallel: true
})
)


#### 4.图片压缩


`安装插件 npm install image-webpack-loader --save-dev`

在chainWebpack中新增以下代码
// 压缩图片 start
config.plugins.delete(‘prefetch’)
config.module.rule(‘images’)
.test(/.(png|jpe?g|gif|svg)(?.*)?$/)
.use(‘image-webpack-loader’)
.loader(‘image-webpack-loader’)
.options({ bypassOnDebug: true })
// 压缩图片 end


[图片生成在线地址]( )


#### 5.公共代码抽离，写在configureWebpack模块中

// 公共代码抽离
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’
}
}
}
}


#### 6.骨架屏


`安装插件 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 ‘./a.vue’
export default new Vue({
components: {
home,
list
},
template: `

` })


**骨架屏页面**


**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: ‘/list’, skeletonId: ‘home’ },
{ path: ‘/kc’, skeletonId: ‘list’ },
]
}))


#### 7.开启Gzip压缩


`yarn add compression-webpack-plugin@6.1.1 --save-dev`  
 `注意的是，服务器上nginx也必须开启gzip才能生效`

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

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

module.exports = {
productionSourceMap: false,
configureWebpack: config => {
// 生产环境相关配置
if (isProduction) {
//gzip压缩
const productionGzipExtensions = [‘html’, ‘js’, ‘css’]
config.plugins.push(
new CompressionWebpackPlugin({
filename: ‘[path].gz[query]’,
algorithm: ‘gzip’,
test: new RegExp(
‘\.(’ + productionGzipExtensions.join(‘|’) + ‘)$’
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
)
}
}
}


nginx中

# 开启gzip
gzip on;

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;

# 进行压缩的文件类型。javascript有多种形式，后面的图片压缩不需要的可以自行删除
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# 设置压缩所需要的缓冲区大小     
gzip_buffers 4 16k;


## 全部代码

// vue.config.js
//骨架屏渲染
const SkeletonWebpackPlugin = require(‘vue-skeleton-webpack-plugin’)

//path引入
const path = require(‘path’)
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== ‘development’;
// 代码压缩
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

// 本地环境是否需要使用cdn
const devNeedCdn = false
// cdn链接
const cdn = {
// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
externals: {
vue: ‘Vue’,
vuex: ‘Vuex’,
‘vue-router’: ‘VueRouter’,
‘axios’: ‘axios’,
‘element-ui’: ‘ELEMENT’,
‘vant’:‘vant’
},
// cdn的css链接
css: [
‘https://unpkg.com/element-ui/lib/theme-chalk/index.css’,
‘https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css’,
],
// cdn的js链接
js: [
‘https://cdn.bootcss.com/vue/2.6.10/vue.min.js’,
‘https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js’,