1、禁止生成 sourceMap 文件
Vue打包时会生成map文件,map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。。
module.exports ={
productionSourceMap:false,// 默认为true
}
2、关闭 Prefetch
vuecli-3 默认开启 Prefetch 预加载模式,提前获取用户可能会访问的内容。在首屏会把这十几个路由文件都下载下来(不会影响首屏加载速度,只会优化子页面)
3、路由懒加载
4、UI 组件库按需加载
5、CDN 加载外部资源
在我们的项目中通常会使用到很多的第三方库,这些插件往往都是不会作更改的,所以我们可以选择将这些插件库使用CDN引入的方式,而不将这些库打包到我们的项目目录中。(vue、vuex、axios,vue-router)可以使用webpack的 externals,它可以忽略掉不需要打包的库
module.exports = {
configureWebpack: config => {
config.externals = {
vue: "Vue",
"vue-router": "VueRouter",
axios: "axios",
}
}
}
(注意:在书写键值对时,值是第三方库作者定义的名字是不可修改的,如果把值名书写错误那么控制台会直接抛出错误。 例如:
“vue-router”:“vue-router” //这是错误的书写方式
“vue-router”: “VueRouter” //这是正确的书写方式
当你在使用外部CDN加速时若项目抛出错误,你可以检查你的键值对的书写是否正确以此来排除你的BUG )
6、gzip 文件压缩 compression-webpack-plugin
const webpack = require("webpack")
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const productionGzipExtensions = ["js", "css"]
module.exports = {
configureWebpack: (config) => {
const plugins = []
//start 生成gzip压缩文件
plugins.push(
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: "gzip",
test: new RegExp("\\.(" +productionGzipExtensions.join("|") + ")$"),
threshold: 10240, //对10K以上的数据进行压缩
minRatio: 0.8,
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100,
})
)
//end 结束生成gzip压缩文件
config.plugins = [...config.plugins, ...plugins]
}
}
7、代码压缩 uglifyjs-webpack-plugins,去除console.log打印以及注释
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
}
}
})
)
}
},
8、图片压缩 image-webpack-loader
// 默认设置
const defaultOptions = {
bypassOnDebug: true
}
// 自定义设置
const customOptions = {
mozjpeg: {
progressive: true,
quality: 50
},
optipng: {
enabled: true,
},
pngquant: {
quality: [0.5, 0.65],
speed: 4
},
gifsicle: {
interlaced: false,
},
// 不支持WEBP就不要写这一项
webp: {
quality: 75
}
}
chainWebpack: config => {
// …
config.module.rule(‘images’)
.test(/.(gif|png|jpe?g|svg)$/i)
.use(‘image-webpack-loader’)
.loader(‘image-webpack-loader’)
.options(customOptions) //默认配置就defaultOptions 这个
.end()
//…
}
}