Dva: dva で開発・ビルドした対象ファイルが非常に大きい (1.3M) パッケージのサイズを小さくする方法がわかりません。

作成日 2016年12月13日  ·  5コメント  ·  ソース: dvajs/dva

こんにちは!

最近は開発にdvaを使っていますが、dva作者の方々のご苦労に感謝です~
現時点で私が遭遇した問題は、プロジェクト ファイルがあまりないのに、パッケージ化されたパッケージが非常に大きいことです (index.js が 1.3MB に達しました)。 dva ビルドがプロジェクトを複数のエントリに分割し、機能ごとにページを分割することをサポートできるかどうかわかりませんか?

question

最も参考になるコメント

対応するモジュールはオンデマンドで導入できます。たとえば、次のように折线图柱状图饼图導入


// ==== 以下必须引入 ====
// core
import echarts from 'echarts/lib/echarts'
// for ie8
//import 'zrender/lib/vml/vml'
// 柱状图
import 'echarts/lib/chart/bar'
// 折线图
import 'echarts/lib/chart/line'
// 饼图
import 'echarts/lib/chart/pie'

// ==== 以下不引入也可以,只是没效果,也不会报错 ====
// tooltip
import 'echarts/lib/component/tooltip'
// legend
import 'echarts/lib/component/legend'
// title
import 'echarts/lib/component/title'


echarts.init(...)

さらに厄介なのは、これらのモジュールは強い依存関係ではないということです.一部のモジュールは、導入しないと効果がなく、一部のモジュールはレンダリング中にエラー メッセージが表示され、特定のモジュールを導入する必要があります。

もちろん、babel プラグインを作成する方が簡単です。 . . . .

全てのコメント5件

package.json投稿する

@nikogu以下は私のpackage.jsonです

 {
  "private": true,
  "entry": {
    "index": "./src/index.js"
  },
  "peerDependencies": {
  },
  "dependencies": {
    "antd": "^2.4.3",
    "dva": "^1.1.0",
    "echarts": "^3.3.1",
    "echarts-for-react": "^1.1.6",
    "moment-timezone": "^0.5.10",
    "path-to-regexp": "^1.7.0",
    "qs": "^6.3.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "reqwest": "^2.0.5"
  },
  "devDependencies": {
    "atool-build": "^0.9.0",
    "atool-test-mocha": "^0.1.5",
    "babel-plugin-dev-expression": "^0.2.1",
    "babel-plugin-dva-hmr": "^0.2.0",
    "babel-plugin-import": "^1.1.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-runtime": "^6.9.2",
    "dora": "^0.4.3",
    "dora-plugin-proxy": "^0.8.4",
    "dora-plugin-webpack": "^0.8.1",
    "dora-plugin-webpack-hmr": "^0.2.1",
    "expect": "^1.20.2",
    "redbox-react": "^1.3.2"
  },
  "scripts": {
    "start": "dora --plugins \"proxy?watchDirs=./mock,webpack?port=8000,webpack-hmr\"",
    "build": "atool-build",
    "test": "atool-test-mocha ./src/**/*-test.js"
  }
}

dvacliでプロジェクトを作成しました

dva new myproject

echartsはすでに大きい

@codering echarts3 の公式 Web サイトによると、圧縮後は 170k を超えています。

対応するモジュールはオンデマンドで導入できます。たとえば、次のように折线图柱状图饼图導入


// ==== 以下必须引入 ====
// core
import echarts from 'echarts/lib/echarts'
// for ie8
//import 'zrender/lib/vml/vml'
// 柱状图
import 'echarts/lib/chart/bar'
// 折线图
import 'echarts/lib/chart/line'
// 饼图
import 'echarts/lib/chart/pie'

// ==== 以下不引入也可以,只是没效果,也不会报错 ====
// tooltip
import 'echarts/lib/component/tooltip'
// legend
import 'echarts/lib/component/legend'
// title
import 'echarts/lib/component/title'


echarts.init(...)

さらに厄介なのは、これらのモジュールは強い依存関係ではないということです.一部のモジュールは、導入しないと効果がなく、一部のモジュールはレンダリング中にエラー メッセージが表示され、特定のモジュールを導入する必要があります。

もちろん、babel プラグインを作成する方が簡単です。 . . . .

このページは役に立ちましたか?
0 / 5 - 0 評価