優化其實是一件很有趣的事，，
以我的專案為例，dist檔案從20M到2M...
一. 使用工具查看專案各個包的大小
首先你需要先安裝webpack的一個插件webpack-bundle-analyzer，專門用來分析各個包的依賴，查看包的體積，
npm intall webpack-bundle-analyzer --save-dev
其次在config->index.js里的build中添加代碼
bundleAnalyzerReport: process.env.npm_config_report
同時在webpack.prod.config.js配置
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
最后使用npm run build --report，構建完了之后就能看到如下：
這樣就能看到各個包的大小和依賴，那個包過大需要優化，也是一目了然，這樣就能針對性進行優化，一般vendor.js和app.js檔案會比較大，
二.針對vendor.js檔案過大進行優化
1.使用CDN引入，webpack.base.conf.js配置Externals
像常用的vue，vuex，axios，Ant Design of Vue，echarts等基本不會變化的依賴可以通過cdn的方式引入，這樣就不會打包到vendor，大大減小包的體積，以我的專案為例：
首先index.js移除
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import antDesign from 'ant-design-vue'
// import 'ant-design-vue/dist/antd.css'
// import moment from 'moment'
// import 'moment/locale/zh-cn'
其次在Externals里添加
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'echarts': 'echarts'
},
最后在html中添加
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.css"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/antd.min.js"></script>
注意：我的專案使用的是ant design，在cdn引入的時候需要注意引入三個檔案，分別是antd.min.css，antd.min.js和時間控制元件moment.min.js，這一點官網介紹的比較少，可參考官網的這部分：
瀏覽器引入 # 在瀏覽器中使用 script 和 link 標簽直接引入檔案，并使用全域變數 antd， 我們在 npm 發布包內的 ant-design-vue/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css，你也可以通過 jsdelivr 或 UNPKG 進行下載， 強烈不推薦使用已構建檔案，這樣無法按需加載，而且難以獲得底層依賴模塊的 bug 快速修復支持， 注意：引入 antd.js 前你需要自行引入 moment，
2.啟用gzip壓縮和關閉sourcemap
我們使用webpack壓碩訓本上能壓縮50%以上，而gzip能在壓縮的基礎上再進行壓縮50%以上！！！啟用gzip需要客戶端和服務端的支持，服務端一般需要在nginx上進行相關配置，
首先安裝插件 compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
然后在config->index.js里將productionGzip設定為true，productionSourceMap設定為false，這樣打包后就不會生成map檔案，可以減小包的體積，
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],
完了之后大家可以對比下壓縮前后的大小
在http回應頭，我們可以看到content-encoding:gzip，這就說明服務端啟用了gzip的壓縮
最后可以看下構建時間，比之前快了三倍，
注意：大家優化完了之后一定要運行下你的專案，檢查一下看看有沒有報錯，
今天就先更新到這，后續還會繼續更新，，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/104033.html
標籤：JavaScript
上一篇：TypeScript---函式
下一篇：day 44