vue?代碼壓縮優(yōu)化方式

更新時間：2022年03月28日 16:42:13 作者：黑色咖啡?Ken

這篇文章主要介紹了vue?代碼壓縮優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue代碼壓縮優(yōu)化

設(shè)置productionSourceMap為false

如果不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。

設(shè)置為false打包時候不會出現(xiàn).map文件

module.exports = {
? ? productionSourceMap: false
}

代碼壓縮

安裝uglifyjs-webpack-plugin插件，可以去除項目中console.log和debugger

npm install uglifyjs-webpack-plugin --save
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生產(chǎn)環(huán)境相關(guān)配置
if (isProduction) {
? ? // 代碼壓縮
? ? config.plugins.push(
? ? ? ? new UglifyJsPlugin({
? ? ? ? ? ? uglifyOptions: {
? ? ? ? ? ? ? ? //生產(chǎn)環(huán)境去除console等信息
? ? ? ? ? ? ? ? compress: {
? ? ? ? ? ? ? ? ? ? warnings: false, // 若打包錯誤，則注釋這行
? ? ? ? ? ? ? ? ? ? drop_debugger: true,//是否移除debugger
? ? ? ? ? ? ? ? ? ? drop_console: true,
? ? ? ? ? ? ? ? ? ? pure_funcs: ['console.log']//移除console
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? sourceMap: false,
? ? ? ? ? ? parallel: true
? ? ? ? })
? ? )
}

圖片資源壓縮

安裝 image-webpack-loader 插件，可以將大圖片進行壓縮從而縮小打包體積

npm install image-webpack-loader --save
? ? chainWebpack: config => {
? ? ? ? // ============壓縮圖片 start============
? ? ? ? config.module
? ? ? ? ? ? .rule('images')
? ? ? ? ? ? .use('image-webpack-loader')
? ? ? ? ? ? .loader('image-webpack-loader')
? ? ? ? ? ? .options({ bypassOnDebug: true })
? ? ? ? ? ? .end()
? ? ? ? // ============壓縮圖片 end============
? ? }

開啟gzip壓縮

開啟gzip壓縮，可以優(yōu)化http請求,提高加載速度

npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require("compression-webpack-plugin");
// 開啟gzip壓縮
config.plugins.push(new CompressionPlugin({
? ? algorithm: 'gzip',
? ? test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件擴展名
? ? // threshold: 10240, // 對超過10k的數(shù)據(jù)進行壓縮
? ? threshold: 5120, // 對超過5k的數(shù)據(jù)進行壓縮
? ? minRatio: 0.8,
? ? cache: true, // 是否需要緩存
? ? deleteOriginalAssets:false ?// true刪除源文件(不建議);false不刪除源文件
?}))

vuecli3代碼壓縮混淆

最近被某大公司大佬虐了，要求混淆用vuecli3寫的代碼（啥敏感信息都沒有，混淆個什么混淆...）

現(xiàn)將混淆流程記錄如下

1、安裝 “uglifyjs-webpack-plugin”

cnpm i --save uglifyjs-webpack-plugin

沒有安裝cnpm的同學可以用npm

2、在項目根目錄下創(chuàng)建一個名為 vue.config.js的文件

3、在vue.config.js中引入uglifyjs-webpack-plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

4、在vue.config.js中配置uglifyjs-webpack-plugin

module.exports = {
? configureWebpack: (config) => {
? ? if (process.env.NODE_ENV == 'production') {
? ? ? // 為生產(chǎn)環(huán)境修改配置
? ? ? config.mode = 'production'
? ? ? // 將每個依賴包打包成單獨的js文件
? ? ? let optimization = {
? ? ? ? minimizer: [new UglifyPlugin({
? ? ? ? ? ? uglifyOptions: {
? ? ? ? ? ? ? ? warnings: false,
? ? ? ? ? ? ? ? compress: {
? ? ? ? ? ? ? ? ? drop_console: true,?
? ? ? ? ? ? ? ? ? drop_debugger: false,
? ? ? ? ? ? ? ? ? pure_funcs: ['console.log']?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ?})]
? ? ? }
? ? ? Object.assign(config, {
? ? ? ? optimization
? ? ? })
? ? } else {
? ? ? // 為開發(fā)環(huán)境修改配置
? ? ? config.mode = 'development'
? ? }
? }
};

這就可以了，接下來大家可以打包試試了