webpack的效能優化
webpack專案優化主要分為兩個方面的優化,生產環境的程式碼優化和開發環境的專案構建優化
生產環境的程式碼優化
- 第一、首屏載入速度 --- 由於spa應用(單頁應用)的特點,其首次載入白屏問題是不可避免的,我們只能通過一些方法減少白屏時間或者優化白屏時的使用者體驗
- 減少白屏時間
- 將專案中的第三方安裝包通過CDN引入
index.html
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.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> <script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
webpack的配置檔案
config.externals = { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'lodash': '_' }
- 提取提取公共依賴(new webpack.optimize.CommonsChunkPlugin("common.js"))
- 配置html、css程式碼壓縮
- 開啟gzip壓縮(需要伺服器也進行gzip的配置)
- 優化白屏時的使用者體驗
- 新增載入動畫 -- 在我們的專案入口檔案(index.html)中新增。
<div id="app"><div class=loading></div></div>
- 新增骨架屏(原理類似載入動畫,只是把動畫換成一個骨架屏)
具體可以參考
- 新增載入動畫 -- 在我們的專案入口檔案(index.html)中新增。
- 專案打包之後vendor或者app.css檔案較大
- 將我們不經常改變版本的第三方安裝包(vue、vue-router、vux、axios、loadsh等)通過cdn的方式引入
- 將我們使用的第三方元件庫的css檔案也通過cdn引入
- 程式碼分片實現路由懶載入
- require.ensure([dependencies], callback,errorCalback,chunkName)
path: 'home', getComponent: (nextState, cb) => { require.ensure([], require => { cb(null, require('./home')) }) }
- es6 的import()進行動態載入
- Vue 的非同步元件和 Webpack 的程式碼分割功能
const Foo = () => import('./Foo.vue') { path: '/foo', component: Foo }
- require.ensure([dependencies], callback,errorCalback,chunkName)
- 優化devtool減少檔案體積
- 關閉生產環境的SourceMap(生產環境的SourceMap真心沒有什麼用處,如果糾結的話可以選擇開啟低級別的SourceMap)具體配置參考
開發環境的專案構建優化
- Dllplugin提高專案構建速度
- 熱替換
devServer: { contentBase: path.resolve(__dirname, 'dist'),//需要監聽的檔案路徑 host: '192.168.56.1',//伺服器地址 compress: true,//開啟伺服器壓縮 port: 3001 // 埠 }
-
配置合適的 delvtool
- HappyPack 配置更多的電腦資源用於專案構建
const HappyPack = require('happypack'); exports.module = { rules: [ { test: /.js$/, use: 'happypack/loader' } ] }; exports.plugins = [ new HappyPack({ loaders: [ 'babel-loader?presets[]=es2015' ] }) ];