vue-cli2.x項目優(yōu)化之引入本地靜態(tài)庫文件的方法
demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource
vue-cli 將靜態(tài)資源文件放到 static 文件夾下并引用:
1.將 node_modules 下相應的 xxx.min.js,復制到項目 static 文件夾下
2.index.html 修改
添加script引入
<script src="static/js/vue.min.js"></script> <script src="static/js/vue-router.min.js"></script>
3.修改 build/webpack.base.conf.js 文件:
注釋掉下面這行
resolve: { extensions: ['.js', '.vue', '.json'], alias: { // 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },
添加externals部分(externals 和 resource 同級)。
externals: { 'vue': 'Vue', 'vue-router': 'VueRouter' },
優(yōu)化后,速度對比
優(yōu)化前編譯時長 | 優(yōu)化后編譯時長 | 優(yōu)化前build時長 | 優(yōu)化后build時長 |
---|---|---|---|
300~400ms | 200ms左右 | 8435ms | 4332ms |
優(yōu)化前文件大?。?br />
優(yōu)化后文件大小:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
element table組件內容換行的實現(xiàn)方案
這篇文章主要介紹了element table組件內容換行的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12vue配置生產環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼
這篇文章主要介紹了vue2.0s中eventBus實現(xiàn)兄弟組件通信的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Vue3+Three.js實現(xiàn)為模型添加點擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標位置;然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10