如果对前端八股文感兴趣，可以留意公重号：码农补给站，总有你要的干货。
1、移除 preload 与 prefetch
vue 脚手架默认开启了 preload 与 prefetch，当我们项目很大时，这个就成了首屏加载的最大元凶了。先简单了解一下 preload 与 prefetch。
1、preload 与 prefetch 都是一种资源预加载机制；
2、preload 是预先加载资源，但并不执行，只有需要时才执行它；
3、prefetch 是意图预获取一些资源，以备下一个导航/页面使用；
4、preload 的优先级高于 prefetch。
的配置
-
chainWebpack: config => {
-
// 移除 preload(预载) 插件
-
.delete('preload')
-
// 移除 prefetch(预取) 插件
-
.delete('prefetch')
-
}
添加配置完成
2、使用 terser-webpack-plugin 清除
开发过程中我们往往需要 console.log 进行调试，调试完后一般也会删除或注释掉，但难免有时会忘记，所以可以使用 terser-webpack-plugin 来清除 。
首先需要下载依赖
npm install terser-webpack-plugin --save-dev
然后配置
-
chainWebpack: (config) => {
-
('terser').tap((args) => {
-
args[0]..drop_console = true
-
return args
-
})
-
}
3、使用 compression-webpack-plugin 开启 gzip 压缩
1、下载依赖
如果配置完成 有报错的话可以降低版本 默认的下载最新版本
npm install compression-webpack-plugin@6.1.1 -D
2、修改配置
-
configureWebpack: config=>{
-
={
-
...,
-
alias: {
-
'vue$': 'vue/dist/',
-
'@': (__dirname, './src'),
-
}
-
},
-
= {
-
'vue': 'Vue',
-
'vue-router': 'VueRouter',
-
'vuex': 'Vuex',
-
'element-ui': 'ELEMENT',
-
}
-
= [
-
...,
-
// 开启 gzip 压缩
-
new CompressionPlugin({
-
filename: '[path][base].gz',
-
algorithm: 'gzip',
-
test: /\.js$|\.css$|\.html$/,
-
threshold: 10240,
-
minRatio: 0.8
-
})
-
]
-
}
压缩前：
压缩后
4、配置使用 CDN 方式引入资源库
有一些js的依赖我们可以不用打包到我们程序中，可以使用cdn的方式来链接js的依赖文件。
1、首先先看配置：在中设置不打包的文件
-
configureWebpack: {
-
externals: {
-
'vue': 'Vue',
-
'vue-router': 'VueRouter',
-
'vuex': 'Vuex',
-
'element-ui': 'ELEMENT',
-
}
-
}
2、查看项目中文件依赖包的版本
3、在中引入需要外联的资源
-
<script src="/npm/vue@2.6.11/dist/"></script>
-
<script src="/npm/vue-router@3.2.0/dist/"></script>
-
<script src="/ajax/libs/element-ui/2.15.9/"></script>
-
<script src="/npm/vuex@3.4.0/dist/"></script>
4、没有开启cdn配置之前文件
5、配置完cdn的文件
5、压缩图片
1、下载依赖
cnpm install image-webpack-loader --save-dev
2、设置配置
-
// webpack相关配置
-
chainWebpack: (config) => {
-
('terser').tap((args) => {
-
args[0]..drop_console = true
-
return args
-
})
-
//移除预载插件
-
.delete('preload')
-
//移除预取插件
-
.delete('prefetch')
-
//图片压缩
-
-
.rule('images')
-
.use('imageWebpackLoader')
-
.loader('image-webpack-loader')
-
.options({
-
disable: .NODE_ENV === 'development', // 开发环境下禁止压缩
-
gifsicle: {
-
interlaced: false
-
}
-
})
-
}
在线压缩图片
原文链接：/p/e018f8b890bd