vue代碼壓縮優(yōu)化方式有哪些

小編給大家分享一下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打包時(shí)候不會(huì)出現(xiàn).map文件

module.exports = {
    productionSourceMap: false
}

代碼壓縮

安裝uglifyjs-webpack-plugin插件，可以去除項(xiàng)目中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, // 若打包錯(cuò)誤，則注釋這行
                    drop_debugger: true,//是否移除debugger
                    drop_console: true,
                    pure_funcs: ['console.log']//移除console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

圖片資源壓縮

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

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============
    }

開(kāi)啟gzip壓縮

開(kāi)啟gzip壓縮，可以?xún)?yōu)化http請(qǐng)求,提高加載速度 

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

vuecli3代碼壓縮混淆

最近被某大公司大佬虐了，要求混淆用vuecli3寫(xiě)的代碼（啥敏感信息都沒(méi)有，混淆個(gè)什么混淆...）

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

1、安裝 “uglifyjs-webpack-plugin”

cnpm i --save uglifyjs-webpack-plugin

沒(méi)有安裝cnpm的同學(xué)可以用npm

2、在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 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'
      // 將每個(gè)依賴(lài)包打包成單獨(dú)的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 {
      // 為開(kāi)發(fā)環(huán)境修改配置
      config.mode = 'development'
    }
  }
};

這就可以了，接下來(lái)大家可以打包試試了

cnpm run build

如果報(bào)錯(cuò)的話，估計(jì)是uglifyjs-webpack-plugin版本又更新了，可能需要修改配置中的 “minimizer”節(jié)點(diǎn)

看完了這篇文章，相信你對(duì)“vue代碼壓縮優(yōu)化方式有哪些”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！