处理js.map文件:productionSourceMap: false
在 vue.config.js 文件添加 productionSourceMap 配置项。js.map 文件是可以查看没有打包加密前的源码,添加配置项后不会生成 js.map 文件,减少包体积。
处理 console.log,注释,控制台黄色警告
vue.config.js 文件配置 terser-webpack-plugin 插件。
terserOptions: {
output: {
comments: false, // 去除注释
},
warnings: false, // 去除黄色警告,
compress: {
drop_console: true,
drop_debugger: true, // 特定情况需要利用debugger防止调试
pure_funcs: ['console.log'], // 移除console.log 避免console.error
}
}
UI框架按需引入
按官方文档配置
第三方架包 CDN 引入
1. vue.config.js 文件配置
const isProduction = process.env.NODE_ENV === 'production'
// CDN优化 不处理,而是全局使用右边的名字遍历
let externals = {
vue:'Vue',
'vue-router':'VueRouter',
axios:'axios',
vuex:'Vuex'
}
let cdn = {
build:{
js:[
"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js",
"https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
'https://unpkg.com/vue-router@3.6.5/dist/vue-router.min.js',
]
},
dev:{
js:[],
css:[]
}
}
module.exports = {
configureWebpack: {
...
externals
},
// 再加工
chainWebpack(config){
// 取出html-webpack-plugin
config.plugin('html').tap(args=>{
// 只是处理一个html=>index.html
if (isProduction) {
args[0].myCdn = cdn.build;
} else {
args[0].myCdn = cdn.dev;
}
return args;
})
}
}
2. index.html 配置(ejs语法配置)
<% for (var i in htmlWebpackPlugin.options.myCdn && htmlWebpackPlugin.options.myCdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.myCdn.js[i] %>"></script>
<% } %>
3. cdn 的好处:
减少包体积以及服务器带宽。用户使用带宽不变,但是将部分带宽分担出去从而减轻自己服务器带宽。
gzip压缩
对超10kb的js、json、css文件进行压缩。产生的压缩包会增大包体积,但是优先返回压缩包给客户端,可以减少带宽和访问时间,由客户端解析压缩包。 在vue.config.js 文件配置compression-webpack-plugin 插件:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
...defineConfig({
transpileDependencies: true,
}),
productionSourceMap: !isProduction,
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
test: /\.(js|json|css)$/i, // 图片一般不Gzip压缩 webpack-image-loader
threshold: 10240, // 只有在10kb以上才压缩
})
]
},
}