幾個webpack打包優化的方法
阿新 • • 發佈：2020-09-10
為什麼要優化打包？
- 專案越做越大，依賴包越來越多，打包檔案太大
- 單頁面應用首頁白屏時間長，使用者體驗差
我們的目的
- 減小打包後的檔案大小
- 首頁按需引入檔案
- 優化 webpack 打包時間
優化方式
1、 按需載入
1.1 路由元件按需載入
1.2 第三方元件和外掛。按需載入需引入第三方元件
1.3 對於一些外掛，如果只是在個別元件中用的到，也可以不要在 main.js 裡面引入，而是在元件中按需引入
2、生產環境關閉 sourceMap
3、程式碼壓縮
- UglifyJS: vue-cli 預設使用的壓縮程式碼方式，它使用的是單執行緒壓縮程式碼，打包時間較慢
- ParallelUglifyPlugin: 開啟多個子程序，把對多個檔案壓縮的工作分別給多個子程序去完成
4、CDN 優化
- 隨著專案越做越大，依賴的第三方 npm 包越來越多，構建之後的檔案也會越來越大。
- 再加上又是單頁應用，這就會導致在網速較慢或者伺服器頻寬有限的情況出現長時間的白屏。
1、將 vue、vue-router、vuex、element-ui 和 axios 這五個庫，全部改為通過 CDN 連結獲取，在 index.html 裡插入 相應連結。
<head> <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" /> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script> <!-- built files will be auto injected --> </body>
2、在 webpack.config.js 配置檔案
module.exports = {
···
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
'Axios':'axios'
}
},
3、解除安裝依賴的 npm 包，npm uninstall axios element-ui vue vue-router vuex
4、修改 main.js 檔案裡之前的引包方式
// import Vue from 'vue' // import ElementUI from 'element-ui' // import 'element-ui/lib/theme-chalk/index.css' // import VueRouter from 'vue-router' import App from './App.vue' import routes from './router' import utils from './utils/Utils' Vue.use(ELEMENT) Vue.use(VueRouter) const router = new VueRouter({ mode: 'hash', //路由的模式 routes }) new Vue({ router, el: '#app', render: h => h(App) })
比較實用的方法: 按需載入，優化loader配置，關閉生產環境的sourceMap，CDN優化。
vue-cli已做的優化： 程式碼壓縮，提取公共程式碼，再優化空間不大。
根據專案實際需要和自身開發水平選擇優化方法，必須避免因為優化產生bug。