Vue 打包體積優(yōu)化方案小結(jié)
Vue-cli3 打包體積優(yōu)化方案
前言:
公司項目完成后 ，打包完成后有1.18MB，其實感覺還行了，但是還可以有優(yōu)化的地方，對于咱們有精益求精（有沒有還是有點*數(shù)的）的精神下再去優(yōu)化，可以先在項目中安裝webpack-bundle-analyzer可以看到各個文件的大小
npm install webpack-bundle-analyzer -save-dev
在vue.config.js中進行配置
module.exports = { chainWebpack: config => { config .plugin(’webpack-bundle-analyzer’) .use(require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin) }}
執(zhí)行npm run build 或者 npm run serve 會出現(xiàn)這花里胡哨的界面用來分析文件大小
分析
還沒進行優(yōu)化前vendor~app.xxxx.js 有1.18MB，咱們可以查看各個bundle大小，針對性的進行優(yōu)化
優(yōu)化
CDN加載
對于vue、vue-router、vuex、axios等都可以在生產(chǎn)環(huán)境用CDN加載
const externals = { ’vue’: ’Vue’, ’vue-router’: ’VueRouter’, ’vuex’: ’Vuex’, ’axios’: ’axios’}const cdn = { css: [], js: [ ’https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js’, ’https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js’, ’https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js’, ’https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js’, ]}module.exports = { chainWebpack: config => { config .plugin(’webpack-bundle-analyzer’) .use(require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin) config.plugin(’html’).tap(args => { if (process.env.NODE_ENV === ’production’) { args[0].cdn = cdn } return args }) },configureWebpack: config => { if (process.env.NODE_ENV === ’production’) { return { externals: externals, }; } },}
接著修改pubilc/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.4tl426be.cn/bcjs/<%= BASE_URL %>favicon.png' rel='external nofollow' > <!-- 使用CDN的CSS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %> <link href='http://m.4tl426be.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.css[i] %>' rel='external nofollow' rel='external nofollow' rel='preload' as='style'> <link href='http://m.4tl426be.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.css[i] %>' rel='external nofollow' rel='external nofollow' rel='stylesheet'> <% } %> <!-- 使用CDN的JS文件 --> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <link href='http://m.4tl426be.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.js[i] %>' rel='external nofollow' rel='preload' as='script'> <% } %> <title>上海比戶</title></head><body> <noscript> <strong></strong> </noscript> <div id='app'></div> <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %> <script src='http://m.4tl426be.cn/bcjs/<%= htmlWebpackPlugin.options.cdn.js[i] %>'></script> <% } %></body></html>
路由懶加載
當(dāng)打包應(yīng)用的時候，JavaScript包會變的特別大，影響頁面加載，如果這時我們在訪問路由的時候去加載該模塊，那會變的十分高效，把靜態(tài)引入方式改為動態(tài)引入方式
import ComponentA from ’../page/components/ComponentA’;routeList = [ { path: ’/comA’, component: ComponentA },]//改為routeList = [ { path: ’/comA’, component: () => import(’../page/components/ComponentA’) },]
由于我的項目一開始就用了路由懶加載，所以在打包文件上看不出體積大小的變化，但是大概會有個300k的大小減少
在vue cli3中，我們還需要手動移除prefetch，Preload，因為在vue cli 官方文檔上提到，可以去了解下，我這大致概括了下
就是當(dāng)首屏加載的時候，會一次性下載完所以的路由文件，這會導(dǎo)致首屏的時候請求內(nèi)容變多，首屏加載變慢，修改如下
module.exports = { chainWebpack: config => { config .plugin(’webpack-bundle-analyzer’) .use(require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin) config.plugin(’html’).tap(args => { if (process.env.NODE_ENV === ’production’) { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete(’prefetch’) // 移除 preload 插件 config.plugins.delete(’preload’); }, configureWebpack: config => { if (process.env.NODE_ENV === ’production’) { return { externals: externals, }; } },}
element-ui 按需加載
看element-ui/lib 這個包就占了總包大小的三分之二，554k，總包也就700多k，所以如果把element-ui 按需加載，那就可以減少體積，按需加載這就不說了吧，都會~:stuck_out_tongue_closed_eyes:
但是需要在 babel.config.js文件中添加（vue cli3 中需要安裝 babel-plugin-component）
module.exports = { presets: [’@vue/app’], //加上這~ plugins: [ [ ’component’, { libraryName: ’element-ui’, styleLibraryName: ’theme-chalk’ } ] ]};
gzip
安裝 compression-webpack-plugin
nmp i compression-webpack-plugin -D
在vue.config.js中引入
const CompressionPlugin = require(’compression-webpack-plugin’);module.exports = { chainWebpack: config => { config .plugin(’webpack-bundle-analyzer’) .use(require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin) config.plugin(’html’).tap(args => { if (process.env.NODE_ENV === ’production’) { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete(’prefetch’) // 移除 preload 插件 config.plugins.delete(’preload’); }, configureWebpack: config => { if (process.env.NODE_ENV === ’production’) { return { externals: externals, plugins: [ //gzip壓縮 new CompressionPlugin({ test: /.js?¨E92E.html|.html?¨E92E.html|.css/, //匹配文件名 threshold: 10240, //對超過10k的數(shù)據(jù)壓縮 deleteOriginalAssets: false //不刪除源文件 }) ], performance: { hints: false } }; } },}
可以在上面的圖看到，進行g(shù)zip壓縮后的文件最大的也只有140k了
但是還需要在服務(wù)端配置
scss文件引入
我們通常會把scss文件抽離出來，一些共用樣式，主題等，然后會在每個需要的組件中引入會顯得繁瑣，我們可以借助scss-loader進行預(yù)處理
例如我們有 resetTable.scss 文件，可以在vue.config.js中引入
module.exports = { chainWebpack: config => { config .plugin(’webpack-bundle-analyzer’) .use(require(’webpack-bundle-analyzer’).BundleAnalyzerPlugin) config.plugin(’html’).tap(args => { if (process.env.NODE_ENV === ’production’) { args[0].cdn = cdn } return args }) // 移除 prefetch 插件 config.plugins.delete(’prefetch’) // 移除 preload 插件 config.plugins.delete(’preload’); }, configureWebpack: config => { if (process.env.NODE_ENV === ’production’) { return { externals: externals, plugins: [ //gzip壓縮 new CompressionPlugin({ test: /.js?¨E92E.html|.html?¨E92E.html|.css/, //匹配文件名 threshold: 10240, //對超過10k的數(shù)據(jù)壓縮 deleteOriginalAssets: false //不刪除源文件 }) ], performance: { hints: false } }; } }, // scss設(shè)置 css: { loaderOptions: { sass: { //我是放在 assets/commcss 目錄下 data: ’@import '@assets/commcss/resetTable.scss';’ } }, },}
上面這圖就是完整的vue.config.js配置啦~
總結(jié)：
以上就是目前我在項目中優(yōu)化的點，但肯定還有其他的優(yōu)化地方，可以相互討論
到此這篇關(guān)于Vue 打包體積優(yōu)化方案小結(jié)的文章就介紹到這了,更多相關(guān)Vue 打包體積優(yōu)化內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. CSS hack用法案例詳解2. css進階學(xué)習(xí) 選擇符3. 使用純HTML的通用數(shù)據(jù)管理和服務(wù)4. 使用css實現(xiàn)全兼容tooltip提示框5. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案6. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera7. css代碼優(yōu)化的12個技巧8. 告別AJAX實現(xiàn)無刷新提交表單9. HTML DOM setInterval和clearInterval方法案例詳解10. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)
網(wǎng)公網(wǎng)安備