//一些代碼壓縮 圖片壓縮就不過多解釋了 上車
```
/*cnpm?install?image-webpack-loader?--save-dev
cnpm?install??compression-webpack-plugin?--save-dev
cnpm?install??uglifyjs-webpack-plugin?--save-dev??*/
const?path?=?require('path');
//?gzip壓縮
const?CompressionPlugin?=?require('compression-webpack-plugin')
//監(jiān)控日志
const?SentryCliPlugin?=?require('@sentry/webpack-plugin');
//?代碼壓縮
const?UglifyJsPlugin?=?require('uglifyjs-webpack-plugin')
const?Version?=?new?Date().getTime();
function?resolve(dir)?{
??return?path.join(__dirname,?dir)
}
const?cdn?=?{
??js:?[
????//?vue必須在第一個(gè)
????'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
????'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
????'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js',
????'https://cdn.bootcss.com/axios/0.18.1/axios.min.js',
????'https://cdn.bootcss.com/qs/6.5.1/qs.min.js',
????'https://cdn.jsdelivr.net/npm/vant@2.5.4/lib/vant.min.js'
??]
}
module.exports?=?{
??//部署應(yīng)用包時(shí)的基本?URL
??publicPath:?'./',
??//當(dāng)運(yùn)行?vue-cli-service?build?時(shí)生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄
??outputDir:?'wx_vue',
??//放置生成的靜態(tài)資源?(js息罗、css、img揽思、fonts)?的?(相對于?outputDir?的)?目錄
??assetsDir:?'./'?+?Version?+?'/assets',
??//?eslint-loader?是否在保存的時(shí)候檢查?安裝@vue/cli-plugin-eslint有效
??lintOnSave:?false,
??//是否使用包含運(yùn)行時(shí)編譯器的?Vue?構(gòu)建版本帆竹。設(shè)置true后你就可以在使用template
??runtimeCompiler:?true,
??//?生產(chǎn)環(huán)境是否生成?sourceMap?文件?sourceMap的詳解請看末尾??
??productionSourceMap:?false,
??/**?去掉hash?*/
??filenameHashing:?true,
??//?pages:?{
??//???index:?{
??//????entry:?'src/main.js',
??//?????template:?'public/index.html',
??//?????filename:?'index.html'
??//???}
??//?},
??configureWebpack:?config?=>?{
????if?(process.env.NODE_ENV?===?'production')?{
??????//?為生產(chǎn)環(huán)境修改配置...
??????config.mode?=?'production'
??????config.devtool?=?"source-map";
????}?else?{
??????//?為開發(fā)環(huán)境修改配置...
??????config.mode?=?'development'
????}
????/**?刪除懶加載模塊的?prefetch?preload柄错，降低帶寬壓力(使用在移動(dòng)端)?*/
????config.plugins.delete("prefetch").delete("preload")
????config.optimization.minimize(true)
????//?gzip壓縮
????//????????config.plugin("compressionPlugin").use(CompressionPlugin).tap(()?=>?[
????//????????{
????//??????????filename:?'[path].gz[query]',
????//??????????algorithm:?'gzip',
????//??????????test:?/\.js$|\.html$|\.css/,?//匹配文件名
????//??????????threshold:?10240,?//超過10k進(jìn)行壓縮
????//??????????minRatio:?0.8,?//?只有壓縮率小于這個(gè)值的資源才會被處理
????//??????????deleteOriginalAssets:?false?//是否刪除源文件
????//????????}
????//??????])
????config.plugins.push(
??????new?CompressionPlugin({
????????filename:?'[path].gz[query]',
????????algorithm:?'gzip',
????????test:?/\.js$|\.html$|\.css/,
????????threshold:?10240,?//?只有大小大于該值的資源會被處理?10240
????????minRatio:?0.8,?//?只有壓縮率小于這個(gè)值的資源才會被處理
????????deleteOriginalAssets:?false?//?刪除原文件
??????})
????)
????//?公共代碼抽離
????config.optimization?=?{
??????splitChunks:?{
????????cacheGroups:?{
??????????vendor:?{
????????????chunks:?'all',
????????????test:?/node_modules/,
????????????name:?'vendor',
????????????minChunks:?1,
????????????maxInitialRequests:?5,
????????????minSize:?0,
????????????priority:?100
??????????},
??????????common:?{
????????????chunks:?'all',
????????????test:?/[\\/]src[\\/]js[\\/]/,
????????????name:?'common',
????????????minChunks:?2,
????????????maxInitialRequests:?5,
????????????minSize:?0,
????????????priority:?60
??????????},
??????????styles:?{
????????????name:?'styles',
????????????test:?/\.(sa|sc|c)ss$/,
????????????chunks:?'all',
????????????enforce:?true
??????????},
??????????runtimeChunk:?{
????????????name:?'manifest'
??????????}
????????}
??????}
????}
??},
??configureWebpack:?{
????resolve:?{
??????alias:?{
????????'vue$':?'vue/dist/vue.esm.js',
????????'@':?resolve('src'),
????????'@c':?path.resolve(__dirname,?'./src/components'),
????????'assets':?path.resolve(__dirname,?'../src/assets')
??????}
????},
????externals:?{
??????'vue':?'Vue',
??????'vuex':?'Vuex',
??????'vue-router':?'VueRouter',
??????'axios':?'axios',
??????'qs':?'Qs',
??????'vant':?'Vant'
??????//????????'weixin-js-sdk':'weixin-js-sdk',
??????//????????'clipboard':'clipboard',
??????//????????'qrcodejs2':'qrcodejs2',
??????//????????'js-md5':'js-md5'
????},
????optimization:?{
??????minimizer:?[
????????new?UglifyJsPlugin({
??????????uglifyOptions:?{
????????????output:?{?//?刪除注釋
??????????????comments:?false
????????????},
????????????//生產(chǎn)環(huán)境自動(dòng)刪除console
????????????compress:?{
??????????????//warnings:?false,?//?若打包錯(cuò)誤，則注釋這行
??????????????drop_debugger:?true,??//清除?debugger?語句
??????????????drop_console:?true,???//清除console語句
??????????????pure_funcs:?['console.log']
????????????}
??????????},
??????????sourceMap:?false,
??????????parallel:?true
????????})
??????]
????}
??},
??//?css相關(guān)配置
??css:?{
????extract:?false,
????loaderOptions:?{
??????stylus:?{
????????'resolve?url':?true,
????????'import':?[]
??????},
??????//??????less:?{
??????//??????//?`globalVars`?定義全局對象，可加入全局變量
??????//????????globalVars:?{
??????//????????????primary:?'#333'
??????//??????????}
??????//????????}
????},
????requireModuleExtension:?true,
??},
??//?webpack-dev-server?相關(guān)配置
??devServer:?{?//?設(shè)置代理
????hot:?true,?//熱加載
????host:?'localhost',?//ip地址
????port:?8085,?//端口
????https:?false,?//false關(guān)閉https刹帕，true為開啟
????open:?true,?//自動(dòng)打開瀏覽器
????proxy:?{???//配置多個(gè)跨域
??????'/api':?{?//本地?
????????target:?'http://172.168.10.155/ysol_wx',
????????//target:?'http://yishanonline.cn/ysol_wx',
????????//target:?'https://yishanol.cn/ysol_wx',
????????ws:?true,
????????changeOrigin:?true,
????????pathRewrite:?{
??????????'^/api':?''
????????}
??????}
????}
??},
??pluginOptions:?{?//?第三方插件配置
????//?...
??},
??chainWebpack:?config?=>?{
????//?============壓縮圖片?start============
????config.module
??????.rule('images')
??????.use('image-webpack-loader')
??????.loader('image-webpack-loader')
??????.options({
????????//{?bypassOnDebug:?true?}
????????mozjpeg:?{?progressive:?true,?quality:?65?},?////?Compress?JPEG?images
????????optipng:?{?enabled:?false?},????//?Compress?PNG?images
????????pngquant:?{?quality:?[0.65,?0.9],?speed:?4?},???//?Compress?PNG?images
????????gifsicle:?{?interlaced:?false?},????//?Compress?SVG?images
????????//??????????webp:?{?quality:?75?}
??????})
??????.end()
????//????????config.module.rules.push({
????//??????????test:?/\.(png|jpe?g|gif|svg)(\?.*)?$/,
????//??????????use:[{
????//??????????????loader:?'image-webpack-loader',
????//??????????????options:?{bypassOnDebug:?true}
????//??????????}]
????//????????})
????//?============壓縮圖片?end============
????config.plugin('html').tap(args?=>?{
??????args[0].cdn?=?cdn
??????return?args
????})
????//?優(yōu)化moment?去掉國際化內(nèi)容
????//?config.plugin('ignore')
????//???//?忽略/moment/locale下的所有文件
????//???.use(new?webpack.IgnorePlugin(/^\.\/locale$/,?/moment$/))
????/*?添加分析工具*/
????if?(process.env.NODE_ENV?===?'production')?{
??????if?(process.env.npm_config_report)?{
????????config
??????????.plugin('webpack-bundle-analyzer')
??????????.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
??????????.end();
????????config.plugins.delete('prefetch')
??????}
????}
????if?(process.env.UMI_ENV?===?'production')?{//當(dāng)為prod時(shí)候才進(jìn)行sourcemap的上傳牡属，如果不判斷票堵，在項(xiàng)目運(yùn)行的打包也會上傳
??????config.plugin("sentry").use(SentryCliPlugin,?[{
????????ignore:?['node_modules'],
????????include:?/\.map$/,?//上傳dist文件的js
????????configFile:?'sentry.properties',?//配置文件地址，這個(gè)一定要有逮栅，踩坑在這里悴势，忘了寫導(dǎo)致一直無法實(shí)現(xiàn)上傳sourcemap
????????release:?'release@0.0.1',?//版本號窗宇，自己定義的變量，整個(gè)版本號在項(xiàng)目里面一定要對應(yīng)
????????deleteAfterCompile:?true,
????????urlPrefix:?'~/wx_vue/'?//cdn?js的代碼路徑前綴
??????}])
????}
??}
}
```
優(yōu)化這條路很長遠(yuǎn)特纤，愿與諸君努力,大家有什么不明白的歡迎評論及私聊
