Vue經典專案瘦身大作戰（全干貨完整例子解讀）
- 一、打包環境
- 二、專案開發依賴環境
- 三、未進行處理的打包檔案
- 四、瘦身方法
- 五、評價方法
- 六、瘦身程序
- 七、瘦身結果
一、打包環境
webpack@4.46.0
二、專案開發依賴環境
整個專案包含以下重量級依賴庫，是打包后專案包檔案龐大的根源，
- echarts圖表
- jquery、layui（因為是舊的代碼不改了）
- SVG js 操作庫拉斐爾raphael
- 時間庫moment
- 百度vue地圖
依賴包版本說明：
"dependencies": {
"@ant-design/icons": "^2.1.1",
"ant-design-vue": "^1.7.8",
"axios": "^0.24.0",
"compression-webpack-plugin": "^4.0.0",
"core-js": "^3.6.5",
"echarts": "^5.2.2",
"echarts-liquidfill": "^3.1.0",
"element-resize-detector": "^1.2.3",
"hammer": "^0.0.5",
"jquery": "^3.6.0",
"js-base64": "^3.7.2",
"layui-src": "^2.6.8",
"moment": "^2.29.1",
"raphael": "^2.3.0",
"vue": "^2.6.11",
"vue-baidu-map": "^0.21.22",
"vue-echarts": "^6.0.0",
"vue-router": "^3.5.3",
"vuex": "^3.6.2"
},
三、未進行處理的打包檔案
其中chunk-vendors檔案差不多2M，相當大，
四、瘦身方法
- 公共檔案CDN
- 按需引入必須用
- 使用webpack插件忽略未使用的檔案
五、評價方法
- 打包分析插件
webpack-bundle-analyzer進行結果評價 - 檔案瀏覽器查看
六、瘦身程序
- CDN引入
在vue.config.js檔案中編輯配置，externals指的是排除以下依賴包的打包，vue等依賴包是公共基礎，
注意引入后變數的使用，注意externals物件中值的書寫規則，如ant-design-vue，必須使用小寫的antd變數來參考1，
module.exports = {
runtimeCompiler: true,
lintOnSave: false, //是否開啟eslint
productionSourceMap: false,
configureWebpack: {
externals:{
vue: 'Vue',
'vuex':'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
raphael: 'Raphael',
'ant-design-vue': 'antd',
},
},
}
在public/index.html檔案中引入檔案，
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
<link rel="stylesheet" href="'https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css'">
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js"></script>
vue-design圖示庫的壓縮
在vue.config.js檔案中編輯如下配置，將所需的檔案指向另一個檔案，
configureWebpack: {
resolve:{
alias: {
'@ant-design/icons/lib/dist$': path.resolve(__dirname,'./src/tools/icons.js') // 自建的檔案的相對路徑
}
},
},
icons.js檔案內容如下，
export { SettingOutline,
CloudOutline,
HomeOutline,
FileImageOutline,
SearchOutline,
MenuFoldOutline,
MenuUnfoldOutline,
AppstoreOutline,
ClusterOutline} from '@ant-design/icons'
- 插件式
過略掉moment/locale下的檔案，
configureWebpack: {
plugins:[
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
},
七、瘦身結果
ant-design-vue瀏覽器引入方法明確說明使用全域變數
antd??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392141.html
標籤：其他
上一篇：搭建前端Vue開發環境(基于Visual Studio Code)
下一篇：vue中key的作用