您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue項目從2.5M優(yōu)化到200kb的方法是什么的相關(guān)知識點,內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
需要新建文件'
vue.config.js
',(這文件名是固定這么寫的),與package.json
在同一級目錄下。
作用:展示打包圖形化信息,會打開一個html頁面,幫助自己分析哪些文件過大,可針對其進(jìn)行優(yōu)化,上線前
注釋掉
安裝 webpack-bundle-analyzer
插件
npm install webpack-bundle-analyzer --save-dev
在 vue.config.js:
里面:
// 引入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 展示圖形化信息 chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) }
安裝 mini-css-extract-plugin
插件
npm install mini-css-extract-plugin -D
在 vue.config.js
里面:
chainWebpack: config => { let miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].[hash:8].css', chunkFilename: 'assets/[name].[hash:8].css' }) config.plugin('extract-css').use(miniCssExtractPlugin) }
安裝image-webpack-loader
插件
npm install image-webpack-loader -D
在 vue.config.js
里面:
config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end()
圖片壓縮可以在:https://tinypng.com/ 進(jìn)行批量壓縮
安裝 compression-webpack-plugin
插件
npm install compression-webpack-plugin -D
在 vue.config.js
里面:
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 開啟gzip壓縮 config.plugins.push( new CompressionWebpackPlugin( { filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240, // 只有大小大于該值的資源會被處理 10240 test: new RegExp('\\.(' + ['js'].join('|') + ')$' ), minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理 deleteOriginalAssets: false // 刪除原文件 } ) )
在 vue.config.js
里面:
// 開啟gzip壓縮 configureWebpack: config => { config.plugins.push( new CompressionWebpackPlugin( { filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240, // 只有大小大于該值的資源會被處理 10240 test: new RegExp('\\.(' + ['js'].join('|') + ')$' ), minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理 deleteOriginalAssets: false // 刪除原文件 } ) ) }
安裝 babel-plugin-component
插件
npm install babel-plugin-component --save-dev
在 babel.config.js
里面:
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] }
安裝 babel-plugin-equire
插件:
npm install babel-plugin-equire -D
在項目中創(chuàng)建 echarts.js
:
// eslint-disable-next-line const echarts = equire([ // 寫上你需要的 echarts api "tooltip", "line" ]); export default echarts;
在 babel.config.js
里面:
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ], "equire" ] }
具體頁面應(yīng)用:
// 直接引用 import echarts from '@/lib/util/echarts.js' this.myChart = echarts.init(this.$refs.chart)
安裝 lodash-webpack-plugin
插件
npm install lodash-webpack-plugin --save-dev
在 babel.config.js
里面:
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ], "lodash", "equire" ] }
在 vue.config.js
里面:
const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); chainWebpack: config => { config .plugin("loadshReplace") .use(new LodashModuleReplacementPlugin()); }
刪除無用的插件,避免加載多余的資源(如果不刪除的話,則會在 index.html 里面加載 無用的 js 文件)
chainWebpack: config => { // 移除prefetch插件,避免加載多余的資源 config.plugins.delete('prefetch') / 移除 preload 插件,避免加載多余的資源 config.plugins.delete('preload'); }
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CompressionWebpackPlugin = require('compression-webpack-plugin'); const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); module.exports = { productionSourceMap: false, // 關(guān)閉生產(chǎn)環(huán)境的 source map lintOnSave: false, publicPath: process.env.VUE_APP_PUBLIC_PATH, devServer: { host: "localhost", port: 3002, proxy: { '/api': { target: "https://tapi.quanziapp.com/api/", ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } }, } }, chainWebpack: config => { // 移除 prefetch 插件 config.plugins.delete('prefetch'); // 移除 preload 插件,避免加載多余的資源 config.plugins.delete('preload'); config.optimization.minimize(true); config.optimization.splitChunks({ chunks: 'all' }) config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) if (process.env.NODE_ENV !== 'development') { let miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'assets/[name].[hash:8].css', chunkFilename: 'assets/[name].[hash:8].css' }) config.plugin('extract-css').use(miniCssExtractPlugin) config.plugin("loadshReplace").use(new LodashModuleReplacementPlugin()); config.module.rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() .use('url-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }).end() config.module.rule('svg') .test(/\.(svg)(\?.*)?$/) .use('file-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }) } }, configureWebpack: config => { // config.plugins.push(["equire"]); if (process.env.NODE_ENV !== 'development') { config.output.filename = 'assets/[name].[hash:8].js' config.output.chunkFilename = 'assets/[name].[hash:8].js' } // 公共代碼抽離 config.optimization = { // 分割代碼塊 splitChunks: { cacheGroups: { //公用模塊抽離 common: { chunks: 'initial', minSize: 0, //大于0個字節(jié) minChunks: 2, //抽離公共代碼時,這個代碼塊最小被引用的次數(shù) }, //第三方庫抽離 vendor: { priority: 1, //權(quán)重 test: /node_modules/, chunks: 'initial', minSize: 0, //大于0個字節(jié) minChunks: 2, //在分割之前,這個代碼塊最小應(yīng)該被引用的次數(shù) }, }, } } // 開啟gzip壓縮 config.plugins.push( new CompressionWebpackPlugin( { filename: info => { return `${info.path}.gz${info.query}` }, algorithm: 'gzip', threshold: 10240, // 只有大小大于該值的資源會被處理 10240 test: new RegExp('\\.(' + ['js'].join('|') + ')$' ), minRatio: 0.8, // 只有壓縮率小于這個值的資源才會被處理 deleteOriginalAssets: false // 刪除原文件 } ) ) }, css: { extract: true, sourceMap: false, loaderOptions: { sass: { }, }, }, }
以上就是“Vue項目從2.5M優(yōu)化到200kb的方法是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。