用grunt打包的angularjs1.x.x[SPA]项目,首次加载超慢，如何解决？

Question

问题描述

当前项目是angularjs1.x.x开发的一个大型项目，在使用grunt打包后，生成一下文件：

1. 依赖js合并混淆后vendor.19913f78.js体积为1.7MB，

2. 项目本身的业务代码合并混淆后app.4476b49e.js体积为1.61MB，

3. 项目所有的view文件合并在index.html文件体积为1.41MB，

这样导致整个项目在第一次打开的时候，客户端向服务器请求这几个文件时间超长，如何解决？

图片

求助

请问大家在开发大型项目的时候都是怎么处理呢？现在的想法是用模块化的思想整理一下项目，使项目可以按需加载，比如使用require.js，但是require.js使用后，如何打包项目？

Answer 1

这种情况的话，一般都是利用lazyload的思想按需加载，减小主体包的体积。

ng 1.x的话有一个这个库是做这方面的，点这里，大体的作用是它可以让你的应用可以先以声明的形式占位，之后会在真正用到的时候下载资源并加载，官网文档说的很清楚了。

另外这个东西配合路由也可以很好的工作，比如ui-router路由配置中的resolve字段，可以把ocLazyload的加载逻辑封装成一个promise，然后写到当前路由页面所需要的资源加载逻辑写到resolve函数中，当页面跳转到该资源时，会自动加载资源。

比如

// route.conf.js
.state('admin_workflow', {
      abstract: true,
      url: '/admin_workflow',
      template: require('../../base/views/content.html'),
      data: {
        isAdminView: true
      },
      resolve: {
        deps: ['$q', '$ocLazyLoad', ($q, $ocLazyLoad) => {
          return module.load($q, $ocLazyLoad)
        }]
      }
    })
 // module.load 方法
export function load ($q, $ocLazyLoad) {
  return $q(res => {
    require.ensure([], (require) => {
      const ctrls = require('./controllers').default
      const dires = require('./directives').default
      const filters = require('./filters').default

      $ocLazyLoad.load([{ name: ctrls }, { name: dires }, {name: filters}])

      res('admin workflow deps loaded')
    }, 'admin.workflow')
  })
}

我这边项目使用的是webpack，所以会有require之类的语法，用别的模块化库打包大同小异。

Answer 2

遇到同样的问题，请问lz解决了吗？或者有什么方案吗