記錄一次上測試環境,vue專案包過大問題,webpack優化專案
阿新 • • 發佈:2021-08-03
背景:測試環境伺服器很慢,上傳一個30M的視訊需要接近4分鐘,當測試告訴我,首屏載入太慢的時候,我不以為然以此搪塞了過去,後來不放心看了下發現確實有問題,
所有的檔案和依賴都被打包到了app.js中。
疑問:webpack4+ 不是有預設的配置了嗎,為什麼沒看到打包出來的chunks檔案,只有一個app.js ????
自己手動加上了splitchunks(之前是commonchunks,已廢棄),
config.optimization.splitChunks({ chunks: 'all', minSize: 30000, // maxSize:30000, //其他入口chunk引用的次數 minChunks: 1, cacheGroups: {libs:{ name:'chunk-libs', test:/[\\/]node_modules[\\/]/, priority:10, chunks:'initial'//onlypackagethirdpartiesthatareinitiallydependent }, elementUI:{ name:'chunk-elementUI',//splitelementUIintoasinglepackage priority:20,//theweightneedstobelargerthanlibsandapporitwillbepackagedintolibsorapp test:/[\\/]node_modules[\\/]_?element-ui(.*)///inordertoadapttocnpm }, commons:{ name:'chunk-commons', test:resolve('src/components'),//cancustomizeyourrules minChunks:3,//minimumcommonnumber priority:-10, reuseExistingChunk:true }
} })
發現有所減少,可是還是比較大,詢問後端得知配置的nginx,沒有開啟gzip壓縮,隨後想到cdn引入
configureWebpack: {
externals:{
'vue':'Vue', //這裡必須加上vue,不加的話會優先使用npm中的vue,導致element的元件不能正常使用
'element-ui': 'ELEMENT',
},
},
configureWebpack: {
externals:{
'vue':'Vue', //這裡必須加上vue,不加的話會優先使用npm中的vue,導致element的元件不能正常使用
'element-ui': 'ELEMENT',
},
},
index.html 中
<linkhref="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css"rel="stylesheet">
<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<scriptsrc="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
至此打包後的檔案大小已經變成了200多K,
還是不明白,cli腳手架中的預設webpack配置中,為啥沒有自動分離我的js和css,而是都打包到了app.js中