Оптимизация SPA приложения

96
13 июля 2021, 18:20

Всем привет. Разработал 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"
  ]
}
READ ALSO
JS Получение данных из спарсеного javascript

JS Получение данных из спарсеного javascript

нашлась довольно интересная задача, пишу расширение для google chrome и столкнулся с проблемой, когда мне требуется из спарсеного <script type="text/javascript">...

118
DHTMLX Gantt. Проблема с родителем в методе gantt.createTask()

DHTMLX Gantt. Проблема с родителем в методе gantt.createTask()

Помогите понять в чем проблема с методом ganttcreateTask()

135