Всем привет. Разработал SPA приложение. Столкнулся с проблемой - оптимизация. Возможно ли оптимизировать SPA приложение до более быстрой загрузки?
При разработке бандл весил 9 Мб. Снизил размер до 700 Кб, используя Lazy Loading. Но 700 Кб также много. Максимальный размер, желательный для меня - 100 Кб. На данный момент нет вариантов для оптимизации.
Изначально я читал, что SPA приложения работают быстрее, чем MPA, т.к. там не загружается веб-страница, идет только получение данных. На мой взгляд, MPA приложения работают быстрее. Мне приходится ждать какое-то время для первоначальной загрузки приложения, также и при переходе на новый маршрут, в то время как в многостраничных приложениях переход на новую страницу идет с большей скоростью.
Использую ASP.NET Core, Vue.js, Webpack 4.
Есть какие-либо варианты? Возможно ли как-то заставить работать SPA приложение быстрее? И вообще существуют ли крупные SPA приложения, работающие быстро?
package.json
{
"name": "ImgApp",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"@aspnet/signalr": "1.1.4",
"@types/webpack-env": "1.14.0",
"aos": "2.3.4",
"axios-progress-bar": "1.2.0",
"babel-plugin-syntax-dynamic-import": "6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"bootstrap": "4.3.1",
"bootstrap-vue": "^2.0.0-rc.28",
"compression-webpack-plugin": "3.0.0",
"css-loader": "^3.2.0",
"event-source-polyfill": "0.0.7",
"font-awesome": "4.7.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"masonry": "0.0.2",
"masonry-layout": "4.2.2",
"node-sass": "^4.5.3",
"nprogress": "0.2.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^2.1.0",
"vue-cookie": "1.1.4",
"vue-cropperjs": "4.0.0",
"vue-masonry": "0.11.7",
"vue-masonry-css": "1.0.3",
"vue-progressive-image": "3.2.0",
"vuelidate": "0.7.4",
"webpack-cli": "3.3.7",
"webpack-hot-middleware": "2.25.0"
},
"dependencies": {
"axios": "^0.19.0",
"babel-core": "6.26.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"lodash": "4.17.15",
"vue": "^2.5.13",
"vue-image-upload": "1.0.1",
"vue-loader": "^14.0.3",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.13",
"vue2-editor": "2.6.6",
"vuex": "3.1.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "3.4.1",
"webpack-dev-middleware": "^3.7.1"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
нашлась довольно интересная задача, пишу расширение для google chrome и столкнулся с проблемой, когда мне требуется из спарсеного <script type="text/javascript">...
Помогите понять в чем проблема с методом ganttcreateTask()