1、terser-webpack-plugin 去掉console.log、debugger、注释
// 该插件vue-cli自带 无需下载安装
const TerserPlugin = require('terser-webpack-plugin')
configureWebpack: {
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
warnings: false,
drop_console: true, // 注释console.*
drop_debugger: true, // 移除 debugger
pure_funcs: ['console.log'] // 移除 console.log
// output: { comments: false } // 去掉注释
}
}
})
]
}
},
2、compression-webpack-plugin 压缩文件， 在传输的时候用gzip压缩，提高资源访问速度。
// 安装下载该插件，需要注意版本要和webpack匹配哦
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js|css)$/, // 匹配文件名
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8 // 压缩比
})
]
}
注意：后端以nginx为例的话，在nginx.conf需要开启gizp服务：
gzip on; //开启gzip压缩功能
这样你就可以在network的response headers中查看到content-encoding:gzip这个选项
HTTP/1.1 200 OK
Server: nginx/1.0.15
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Content-Encoding: gzip
3、svg-sprite-loader 加载器
// 下载安装插件，配置vue.config.js
chainWebpack(config) {
// set svg-sprite-loader
config.module.rule('svg').exclude.add(resolve('src/icons')).end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons')) // 存放.svg文件
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
// 封装组件
<template>
<svg :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
// 使用组件
<svg-icon icon-class="bug" />
4、 splitChunks 模块分割，为了节省打包时间
chainWebpack(config) {
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // 不怎么变得第三方依赖单独打包
},
elementUI: {
name: 'chunk-elementUI', // elementUI单独打包
priority: 20,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // 公共组件单独打包
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
// https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
config.optimization.runtimeChunk('single')
}
5、script-ext-html-webpack-plugin 将其内链在 index.html
runtime 只是驱动不同路由页面的，代码量比较少，单独打包并内链到html
chainWebpack(config) {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}
])
.end()
}
6、 别名 @
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
},
}
7、预加载 preload,提高用户操作体验
config.plugin('preload').tap(() => [
{
rel: 'preload',
// to ignore runtime.js
// https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
include: 'initial'
}
])
// when there are many pages, it will cause too many meaningless requests
config.plugins.delete('prefetch') // 把 runtime 的 preload 移除
