vue打包通過image-webpack-loader插件對圖片壓縮優化操作
vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積
step1：
npm install image-webpack-loader --save-dev
step2：
在build/webpack.base.conf.js中改如下配置
module.exports = { module: { { test: /.(png|jpe?g|gif|svg)(?.*)?$/, // loader: ’url-loader’, // options: { // limit: 100000, // name: utils.assetsPath(’img/[name].[hash:7].[ext]’) // } loader: [’url-loader?limit=10000&name=’ + utils.assetsPath(’img/[name].[hash:7].[ext]’), ’image-webpack-loader’ ] }, ] },}
補充知識：vuecli3項目打包優化配置要點
一、新建項目使用 vue-cli3 構建一個初始的Vue項目
因為使用了cli3，很多目錄結構不見了，而相關配置是放在vue.config.js里面的，因此在根目錄，新建一個vue.config.js
module.exports = {}
二、正式優化1、將 productionSourceMap 設為 false
(1) 在vue.config.js中module.exports寫入：
module.exports = { productionSourceMap: false}
2、圖片壓縮
vue正常打包之后一些圖片文件很大，使打包體積很大，通過image-webpack-loader插件可將大的圖片進行壓縮從而縮小打包體積
(1) 先安裝依賴：cnpm install image-webpack-loader --save-dev
(2) 在vue.config.js中module.exports寫入：
module.exports = { productionSourceMap: false, chainWebpack: config => { // ============壓縮圖片 start============ config.module .rule(’images’) .use(’image-webpack-loader’) .loader(’image-webpack-loader’) .options({ bypassOnDebug: true }) .end() // ============壓縮圖片 end============ }}
3、cdn配置（可選）
(1) 在vue.config.js 最上邊寫入：
// 是否為生產環境const isProduction = process.env.NODE_ENV !== ’development’// 本地環境是否需要使用cdnconst devNeedCdn = false// cdn鏈接const cdn = { // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱） externals: { vue: ’Vue’, vuex: ’Vuex’, ’vue-router’: ’VueRouter’ }, // cdn的css鏈接 css: [], // cdn的js鏈接 js: [ ’https://cdn.staticfile.org/vue/2.6.10/vue.min.js’, ’https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js’, ’https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js’ ]}
(2) 在vue.config.js module.exports chainWebpack中寫入：
// ============注入cdn start============config.plugin(’html’).tap(args => { // 生產環境或本地需要cdn時，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args})// ============注入cdn start============
(3) 在vue.config.js module.exports configureWebpack中寫入：
configureWebpack: config => { // 用cdn方式引入，則構建時要忽略相關資源 if (isProduction || devNeedCdn) config.externals = cdn.externals}
(4) 當前配置的vue.config.js
// 是否為生產環境const isProduction = process.env.NODE_ENV !== ’development’// 本地環境是否需要使用cdnconst devNeedCdn = false// cdn鏈接const cdn = { // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱） externals: { vue: ’Vue’, vuex: ’Vuex’, ’vue-router’: ’VueRouter’ }, // cdn的css鏈接 css: [], // cdn的js鏈接 js: [ ’https://cdn.staticfile.org/vue/2.6.10/vue.min.js’, ’https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js’, ’https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js’ ]}module.exports = { productionSourceMap: false, chainWebpack: config => { // ============壓縮圖片 start============ config.module .rule(’images’) .use(’image-webpack-loader’) .loader(’image-webpack-loader’) .options({ bypassOnDebug: true }) .end() // ============壓縮圖片 end============ // ============注入cdn start============ config.plugin(’html’).tap(args => { // 生產環境或本地需要cdn時，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ }, configureWebpack: config => { // 用cdn方式引入，則構建時要忽略相關資源 if (isProduction || devNeedCdn) config.externals = cdn.externals }}
(5) 在public index.html 寫入
<!DOCTYPE html><html lang='en'> <head> <meta charset='utf-8' /> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta name='viewport' content='width=device-width,initial-scale=1.0' /> <link rel='icon' href='http://m.b3g6.com/bcjs/<%= BASE_URL %>favicon.ico' /> <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href='http://m.b3g6.com/bcjs/<%= htmlWebpackPlugin.options.cdn.css[i] %>' rel='stylesheet' /> <% } %> <!-- 使用CDN的CSS文件 --> <title>cli3_base</title> </head> <body> <noscript> <strong>We’re sorry but cli3_base doesn’t work properly withoutJavaScript enabled. Please enable it to continue.</strong > </noscript> <div id='app'></div> <!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src='http://m.b3g6.com/bcjs/<%= htmlWebpackPlugin.options.cdn.js[i] %>'></script> <% } %> <!-- 使用CDN的JS文件 --> <!-- built files will be auto injected --> </body></html>
(6) 重啟項目npm run serve
(7) 在src/router.js修改
將
Vue.use(Router)
改為
if (!window.VueRouter) Vue.use(Router)
(8) 重新啟動npm run serve即可，現在的配置是開發環境，在瀏覽器的Network JS里面是看不到的。若想查看，請將vue.config.js里面的
// 本地環境是否需要使用cdn
const devNeedCdn = false
改為
// 本地環境是否需要使用cdn
const devNeedCdn = true
然后再次重啟npm run serve，然后瀏覽器查看Network JS
Network JS
4、代碼壓縮
(1) 安裝依賴：cnpm i -D uglifyjs-webpack-plugin
(2) 在vue.config.js 最上邊引入依賴
// 代碼壓縮
const UglifyJsPlugin = require(’uglifyjs-webpack-plugin’)
(3) 在vue.config.js module.exports configureWebpack 里面新增
// 生產環境相關配置if (isProduction) { // 代碼壓縮 config.plugins.push( new UglifyJsPlugin({ uglifyOptions: {//生產環境自動刪除consolecompress: { warnings: false, // 若打包錯誤，則注釋這行 drop_debugger: true, drop_console: true, pure_funcs: [’console.log’]} }, sourceMap: false, parallel: true }) )}
5、開啟Gzip
(1) 安裝依賴：cnpm install --save-dev compression-webpack-plugin
(2) 在vue.config.js 頂部引入依賴
// gzip壓縮
const CompressionWebpackPlugin = require(’compression-webpack-plugin’)
(3) 在vue.config.js module.exports configureWebpack 里面新增，直接放在代碼壓縮下邊即可
// 生產環境相關配置if (isProduction) { // 代碼壓縮 // .................. // gzip壓縮 const productionGzipExtensions = [’html’, ’js’, ’css’] config.plugins.push( new CompressionWebpackPlugin({ filename: ’[path].gz[query]’, algorithm: ’gzip’, test: new RegExp(’.(’ + productionGzipExtensions.join(’|’) + ’)$’ ), threshold: 10240, // 只有大小大于該值的資源會被處理 10240 minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理 deleteOriginalAssets: false // 刪除原文件 }) )}
6、公共代碼抽離
(1) 在vue.config.js module.exports configureWebpack 里面新增，直接放在gzip壓縮下邊即可
// 公共代碼抽離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’ } } }}
完整的vue.config.js
// 代碼壓縮const UglifyJsPlugin = require(’uglifyjs-webpack-plugin’)// gzip壓縮const CompressionWebpackPlugin = require(’compression-webpack-plugin’)// 是否為生產環境const isProduction = process.env.NODE_ENV !== ’development’// 本地環境是否需要使用cdnconst devNeedCdn = true// cdn鏈接const cdn = { // cdn：模塊名稱和模塊作用域命名（對應window里面掛載的變量名稱） externals: { vue: ’Vue’, vuex: ’Vuex’, ’vue-router’: ’VueRouter’ }, // cdn的css鏈接 css: [], // cdn的js鏈接 js: [ ’https://cdn.staticfile.org/vue/2.6.10/vue.min.js’, ’https://cdn.staticfile.org/vuex/3.0.1/vuex.min.js’, ’https://cdn.staticfile.org/vue-router/3.0.3/vue-router.min.js’ ]}module.exports = { productionSourceMap: false, chainWebpack: config => { // ============壓縮圖片 start============ config.module .rule(’images’) .use(’image-webpack-loader’) .loader(’image-webpack-loader’) .options({ bypassOnDebug: true }) .end() // ============壓縮圖片 end============ // ============注入cdn start============ config.plugin(’html’).tap(args => { // 生產環境或本地需要cdn時，才注入cdn if (isProduction || devNeedCdn) args[0].cdn = cdn return args }) // ============注入cdn start============ }, configureWebpack: config => { // 用cdn方式引入，則構建時要忽略相關資源 if (isProduction || devNeedCdn) config.externals = cdn.externals // 生產環境相關配置 if (isProduction) { // 代碼壓縮 config.plugins.push(new UglifyJsPlugin({ uglifyOptions: { //生產環境自動刪除console compress: { warnings: false, // 若打包錯誤，則注釋這行 drop_debugger: true, drop_console: true, pure_funcs: [’console.log’] } }, sourceMap: false, parallel: true}) ) // gzip壓縮 const productionGzipExtensions = [’html’, ’js’, ’css’] config.plugins.push(new CompressionWebpackPlugin({ filename: ’[path].gz[query]’, algorithm: ’gzip’, test: new RegExp( ’.(’ + productionGzipExtensions.join(’|’) + ’)$’ ), threshold: 10240, // 只有大小大于該值的資源會被處理 10240 minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理 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’ } }} } } }}
以上這篇vue打包通過image-webpack-loader插件對圖片壓縮優化操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
1. 使用Python webdriver圖書館搶座自動預約的正確方法2. PHP如何開啟Opcache功能提升程序處理效率3. ASP.NET MVC使用jQuery ui的progressbar實現進度條4. 在線php代碼縮進、代碼美化工具：PHP Formatter5. 淺談由position屬性引申的css進階討論6. PHP程序員簡單的開展服務治理架構操作詳解(二)7. 從Python的字符串中剝離所有非數字字符（“?！背猓?/a>8. Python3 json模塊之編碼解碼方法講解9. android H5本地緩存加載優化的實戰10. Android 簡單的實現滑塊拼圖驗證碼功能
網公網安備